/**************************************
 *
 * VLOOK™ CSS 基础库
 *
 * V28.1
 * 2025-01-18
 * powered by MAX°孟兆
 *
 * QQ Group: 805502564
 * Telegram Channel: t.me/vlook_markdown
 * email: maxchow@qq.com
 *
 * https://github.com/MadMaxChow/VLOOK
 * https://gitee.com/madmaxchow/VLOOK
 *
 *************************************/

/**************************************
 自定义 UI 元素层叠次序

---------- 云顶 UI 区 ----------

预加载提示 / #write::before / z-index: 7000;

检查锚点 / .v-check-hash / z-index: 6500;

当前字体风格加载信息 / .v-font-style-current / z-index: 6100;
欢迎页 / .v-welcome-page / z-index: 6000;

---------- 高优先信息 UI 区 -----

链接清单 / .v-link-info-list / z-index: 4500;
工具栏提示、弹窗提示、字体风格切换 / .v-tool-tips, .v-info-tips, .v-font-style / z-index: 4000;
聚光灯 / .v-spotlight / z-index: 3500;
编辑时的表格编辑工具栏 / .ty-table-edit: 3000

---------- 二级 UI 区 ----------

插图导航 / .v-fig-nav / z-index: 2200;
脚注面板 / .v-footnote-pn / z-index: 2100;
导航中心收起/展开引导把手 / .v-nav-center-handle / z-index: 2000;
导航中心面板 / .v-nav-center / z-index: 2000;
    导航中心头部 / .v-nav-center-header / z-index: 10;
    导航中心脚部 / .v-nav-center-footer / z-index: 10;

---------- UI 间隔区 ----------

遮罩 / .v-mask / z-index: 1000;
画中画 / .v-pic-in-pic / z-index: 500;

---------- 增强工具操作区 ----------

回到最后浏览位置 / .v-resume-reading / z-index: 100;
Mermaid工具提示 / div.mermaidTooltip / z-index: 100;
工具栏 / .v-toolbar / z-index: 100;
导航历史入口 / .v-nav-history  / z-index: 100;
逐章导航面板 / .v-chapter-nav / z-index: 100;
状态栏 / .v-status-bar / z-index: 80;
文档更多内容遮挡阴影（下）/ .v-more-doc-content-after / z-index: 69;
适应宽度 / .v-fill-width / z-index: 65;
文档更多内容遮挡阴影（上） / .v-more-doc-content-before / z-index: 60

---------- 文档内容交互区 ----------

段落漫游边框 / #v-pg-nav-mask-border / z-index: 30;
内容辅助操作栏 / .v-content-assistor / z-index: 20;
内容展开操作区 / .v-content-expander / .v-cap-cntr.expander::before / z-index: 10;

---------- 导航中心 ----------

导航中心内文档抽屉入口 .v-doc-lib-board / z-index: 20;

**************************************/

// -----
// 通用变量 #Common_CSS_Var
:root {
    // 主题配套预置选项 vlook-header-autonum
    --vlook-header-autonum: @vHeaderAutoNum;
    // 主题配套预置选项 vlook-query
    --vlook-query: @vlookQuery;
    // 主题配套预置选项 vlook-gray-mode
    --vlook-gray-mode: @vlookGrayMode;

    // 主题中强制控制，对大于指定层级的标题都不显示
    --v-hide-outline-over:@hideOutlineOver;

    --v-summary-w: 24px;
    --v-ex-limit: 300px;

    // 主题相关
    --v-theme-name: @themeName; // 主题名称
    --v-theme-version: @themeVer; // 主题版本，对应适配 VLOOK.JS 的版本
    --v-theme-email: @themeEmail; // 接收定制主题更新的电子邮箱
    --v-color-scheme: light; // 默认颜色模式为：Light 明亮
    --thm-c-t-pd: @coverTextPadding;
    --thm-bc-t-pd: @backcoverTextPadding;

    // 导航中心、工具栏相关 UI 尺寸
    --v-nav-center-w:300px;
    --v-write-ml-def: calc(var(--v-nav-center-w) + 30px);
    --v-write-ml: var(--v-write-ml-def);
    --v-tb-btn-w:40px;
    --v-tb-btn-s:5px;
    --v-top-margin:8px;
    --v-seg-h:28px;

    // 过渡效果设置
    --v-trans-dur: 300ms;

    --tbl-cell-padding: 8px;

    // --------------------
    // 用于 plugin*.txt 中
    --v-btn-bg: @buttonBgColor;
    --v-btn-f: @buttonForeColor;

    // ----------
    // 光标（Light）
    --cur-pointer-lg: url(""), auto;
    --cur-copy-normal-lg: url(""), auto;
    --cur-copy-as-md-lg: url(""), auto;
    --cur-pointer-text-lg: url(""), auto;
    --cur-laser-lg: url("") 12 12, auto;
    --cur-doclib-lg: url(""), auto;
    --cur-http-lg: url(""), auto;
    --cur-https-lg: url(""), auto;
    --cur-email-lg: url(""), auto;
    --cur-risk-lg: url(""), auto;
    --cur-inner-lg: url(""), auto;

    // 光标（Dark）
    --cur-pointer-dk: url(""), auto;
    --cur-copy-normal-dk: url(""), auto;
    --cur-copy-as-md-dk: url(""), auto;
    --cur-pointer-text-dk: url(""), auto;
    --cur-laser-dk: url("") 12 12, auto;
    --cur-doclib-dk: url(""), auto;
    --cur-http-dk: url(""), auto;
    --cur-https-dk: url(""), auto;
    --cur-email-dk: url(""), auto;
    --cur-risk-dk: url(""), auto;
    --cur-inner-dk: url(""), auto;

    // 光标
    --cur-pointer: var(--cur-pointer-lg);
    --cur-copy-normal: var(--cur-copy-normal-lg);
    --cur-copy-as-md: var(--cur-copy-as-md-lg);
    --cur-copy: var(--cur-copy-normal);
    --cur-pointer-text: var(--cur-pointer-text-lg);
    --cur-laser: var(--cur-laser-lg);
    --cur-doclib: var(--cur-doclib-lg);
    --cur-http: var(--cur-http-lg);
    --cur-https: var(--cur-https-lg);
    --cur-email: var(--cur-email-lg);
    --cur-risk: var(--cur-risk-lg);
    --cur-inner: var(--cur-inner-lg);

    --v-input-focus-shadow: 0 0 0 3px fade(@aColor, 35%); // 输入/编辑时阴影样式
    --v-input-focus-inn-shadow: 0 0 0 1px var(--a-color) inset; // 输入/编辑时阴影样式
    --v-input-focus-border: var(--a-color);
}

@import "normalize.css";
@import "typora";
@import "mermaid";

@writePaddingRight: 20px; // 与插件 gWritePaddingRight 同步修改
@floatTopBottom: 50px;
@floatTopBottomOnMobile: 70px;

html {
    font-size: @fontSize;
    background-color: var(--d-bc);
}

.v-vlook-inside {}

.v-write {}

// 针对 VLOOK 未加载完成前的样式
@{writeOnHTML}::before {
    content: "Preparing VLOOK™ plugin ...\a\a正在准备 VLOOK™ 插件 ...";
    white-space: pre-wrap;
    padding-top: 4em;
    color: @buttonForeColor;
    background: @buttonBgColor;
    font: italic var(--v-f-w-bd) 2em/10 var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
    line-height: 2 !important;
    text-align: center;
    overflow: auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 7000;

    // 插件加载成功后，会清空该动画属性，相关样式 .v-load-done::before
    // 在 60s 后该动画属性未被清空，则可能插件加载失败，或是没有使用正确的配置导出 HTML
    animation: maybe-failed 500ms ease 60s 1 forwards;
}

@keyframes maybe-failed {
    0% {
    }
    100% {
        content: "Oops~!\a\aThe VLOOK™ plugin load failed, it may be due to network reasons, or the page was not exported in the correct way.\aPlease try refreshing the page later, or contact the publisher of the page.\a\aVLOOK™ 插件加载失败，可能是网络原因，或没有使用正确的方式导出页面。\a请稍后再刷新页面，或联系页面的发布者。\a\ahttps://madmaxchow.github.io/VLOOK/index.html";
        font-size: 1.5em;
        color: @buttonForeHoverColor;
        background: var(--a-color);
    }
}

// 针对 VLOOK 已完成加载的样式
.v-load-done {
    display: block !important;
}
.v-load-done::before {
    display: none !important;
    font-style: normal;
    animation: none;
}

body {
    background: var(--d-bc) var(--d-bi) !important;
    color: var(--d-fc);
    font: var(--v-f-w-text) @fontSize/@paragraphInnerLineHeight var(--v-f-fm-text); // [style] [weight] [size/[line-height]] [family]
    // 输入光标颜色
    caret-color: var(--a-hover-color);
    -webkit-tap-highlight-color: transparent;

    // 不要修改这个选择器中的 overflow 属性
    // 否则会导致其内的子元素滚动到顶或到底后向上冒泡同时滚动
    // overflow-x: visible !important;
    // overflow-y: visible !important;
}
content {
    // 不要修改这个选择器中的 overflow 属性
    // 否则会导致其内的子元素滚动到顶或到底后向上冒泡同时滚动
    // overflow-x: visible !important;
}

@{onHTML} {
    padding-left: 0;
    padding-right: 0;
}

body>*:first-child {
    margin-top: 0 !important;
}

body>*:last-child {
    margin-bottom: 0 !important;
}

// 解结，可滚动
body.freeze {
    overflow: hidden;
}
// 冻结，不可滚动
body.unfreeze {
    overflow: auto;
}

// --------------------------------------------------
// 针对 Gray Mode 相关样式
@grayModeFilter: ~'grayscale(1)';
@graySelector: ~':is(#write, .v-welcome-page, .v-mask, .v-toolbar, .v-link-info-list, .v-font-style, .v-font-style-current, .v-content-assistor, .v-tbl-x, .v-footnote-pn, .v-tool-tips, .v-info-tips, .v-pg-nav-mask-border, .v-fill-width, .v-pic-in-pic, .v-chapter-nav, .v-fig-nav, .v-nav-center, .v-nav-history)';
// 正常样式
body @{graySelector},
body .typora-export-content::before {
    filter: none;
    transition: filter 3s ease-in-out;
}
// 灰色模式 样式
body.gray @{graySelector} {
    filter: @grayModeFilter !important;
}
// 状态栏中除「关闭灰度模式」按钮外
body.gray .v-status-bar>div:not([class*="v-sts-gray"]) {
    filter: @grayModeFilter !important;
}
// 正文外背景
body.gray .typora-export-content::before {
    .genContentBeforeFilter(@filter) when (@filter = none) {
        filter: @grayModeFilter !important;
    }
    .genContentBeforeFilter(@filter) when not (@filter = none) {
        filter: @grayModeFilter @docExtBackgroundFilter !important;
    }
    .genContentBeforeFilter(@docExtBackgroundFilter);
}
// 显示：关闭灰度模式按钮
body.gray .v-status-bar>.v-sts-gray {
    display: inline-flex;
}

// 适应宽度
.v-fill-width {
    display: none;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    position: fixed;
    top: 40%;
    bottom: 40%;
    right: @writePaddingRight;
    height: auto;
    padding-left: 30px;
    border-radius: var(--v-r-b);
    z-index: 65;
}
.v-fill-width>svg{
    transform: rotate(180deg);
}
.v-fill-width:hover {
    background: linear-gradient(270deg, var(--ac-t2-fade), transparent);
    padding-left: 40px;
    cursor: var(--cur-pointer);
}
.v-fill-width:hover>svg>use {
    fill: var(--a-hover-color);
    opacity: 1;
}
// ---
.v-fill-width.enabled {
    width: @writePaddingRight * 3 !important;
    right: 0;
    padding-left: 42px;
}
.v-fill-width.enabled:hover {
    padding-left: 0;
    background: linear-gradient(90deg, var(--ac-t2-fade), var(--d-bc));
}
.v-fill-width.enabled>svg {
    transform: rotate(0deg);
}

// 覆盖 Typora 的 base.css 对应的样式
// 段落中只有图片时的样式（结合主题的 genTableAndFigureAlign 处理，默认左对齐或居中）
@onlyImageInPg: ~"@{writeOnEditing} p > .md-image:only-child:not(.md-img-error) img, @{writeOnHTML} p > img:only-child";
@{onlyImageInPg} {
    // display: block;
    // margin: 0;
    margin: 0 auto;
    display: block;
}
// 段落中只有图片链接时的样式（结合主题的 genTableAndFigureAlign 处理，默认左对齐或居中）
@onlyImageLinkInPg: ~"@{writeOnEditing} p:has(> .md-link:only-child .md-image:only-child:not(.md-img-error) img), @{writeOnHTML} p:has(> a:only-child > img:only-child)";
@{onlyImageLinkInPg} {
    // text-align: left;
    text-align: center;
}

// 插图
#write p>img,
@{writeOnEditing} p>.md-image:not(.md-img-error) img:not([src*="#line"]), // 是指 p 内只有 img 的才被视为插图
@{writeOnEditing} p>.md-image:not(.md-img-error) img:not([src*="#block"]), // 是指 p 内只有 img 的才被视为插图
.v-fig:not([aria-roledescription="zenuml"]),
.md-diagram-panel>.md-diagram-panel-preview>svg, // 编辑时
.md-diagram-panel>svg {
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    padding: 0;
    border: @captionContentBorder;
    background-color: var(--fig-solid-bg);
}
// 从 Typora 1.10.2-dev 开始启用
.mermaid-svg {
    margin-left: 0;
}

@{writeOnEditing} .md-image {
    font-size: @fontSizePx;
}

// 带 loading 属性的图片
img[loading]::after {
    min-width: 80px;
    min-height: 20px;
}

// 图片地址参数指定是否填充边缘
@{writeOnEditing} .md-image[data-src*="#padding"]>img, // 编辑时
@{sharpMagicImgContanier} img[src*="#padding"],
@{sharpMagicImgContanier} svg[data-inject-url*="#padding"] {
    padding: @figurePadding !important;
    background: var(--d-bc);
}

// 非显式指定时（即普通的连续图片、插图）
#write p :is(.md-image+.md-image, img+img, svg+svg, .v-caption+.v-caption) {
    margin-left: @figurePadding !important;
    margin-bottom: @figurePadding !important;
}

// 图片地址参数指定是否使用网格背景
@sharpMagicImgContanier: ~":is(@{writeOnHTML}, .v-pic-in-pic, .v-fig-content)";
@{writeOnEditing} .md-image[data-src*="#line"]>img, // 编辑时
@{writeOnHTML} img[src*="#line"],
@{writeOnHTML} svg[data-inject-url*="#line"] {
    background: var(--v-fig-grid-l);
}
@{writeOnEditing} .md-image[data-src*="#block"]>img, // 编辑时
@{sharpMagicImgContanier} img[src*="#block"],
@{sharpMagicImgContanier} svg[data-inject-url*="#block"] {
    background: var(--v-fig-grid-b);
}

// 图片地址参数指定图片的显示版式为：icon
@{writeOnEditing} .md-image[data-src*="#icon"]>img, // 编辑时
@{writeOnHTML} img[src*="#icon"],
@{writeOnHTML} svg[data-inject-url*="#icon"],
@{writeOnEditing} a kbd>.md-image>img,
@{writeOnHTML} a kbd>:is(img, svg) {
    display: inline !important;
    height: 1em;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
}
@{writeOnHTML} a kbd :is(img, svg),
@{writeOnHTML} svg[data-inject-url*="#icon"] {
    width: auto;
}
// 图片地址参数指定图片的显示版式为：icon0
@{writeOnEditing} .md-image[data-src*="#icon0"]>img, // 编辑时
@{writeOnHTML} img[src*="#icon0"],
@{writeOnHTML} svg[data-inject-url*="#icon0"] {
    height: auto; // 原始图标大小
    margin-top: -.1em !important;
}
// 图片地址参数指定图片的显示版式为：icon2x
@{writeOnEditing} .md-image[data-src*="#icon2x"]>img, // 编辑时
@{writeOnHTML} img[src*="#icon2x"],
@{writeOnHTML} svg[data-inject-url*="#icon2x"] {
    height: 2em;
}

// 图片地址参数指定图片的显示版式为：logo
@{writeOnEditing} .md-image[data-src*="#logo"]>img, // 编辑时
@{writeOnHTML} img[src*="#logo"],
@{writeOnHTML} svg[data-inject-url*="#logo"] {
    background: none;
    border: none !important;
    border-radius: 0 !important;
}
// 左对齐
@{writeOnEditing} .md-image[data-src*="#logo"][data-src*="#left"],//>img, // 编辑时
@{writeOnHTML} img[src*="#logo"][src*="#left"],
@{writeOnHTML} svg[data-inject-url*="#logo"][data-inject-url*="#left"] {
    float: left !important;
    padding: 0 @figurePadding 0 0;
}
// 右对齐
@{writeOnEditing} .md-image[data-src*="#logo"][data-src*="#right"],//>img, // 编辑时
@{writeOnHTML} img[src*="#logo"][src*="#right"],
@{writeOnHTML} svg[data-inject-url*="#logo"][data-inject-url*="#right"] {
    float: right !important;
    padding: 0 0 0 @figurePadding;
}

// 图片地址参数指定图片的显示版式为：card
@{writeOnEditing} .md-image[data-src*="#card"]>img, // 编辑时
@{writeOnHTML} img[src*="#card"],
@{writeOnHTML} svg[data-inject-url*="#card"] {
    border: none !important;
    // border: @captionContentBorder;//2px solid var(--pn-c);
    border-radius: var(--v-r-b) var(--v-r-b-xc);
}
@{writeOnEditing} .md-image[data-src*="#cardd"]>img, // 编辑时
@{writeOnHTML} img[src*="#cardd"],
@{writeOnHTML} svg[data-inject-url*="#cardd"] {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    // border: none !important;
}
// 编辑时明信片双卡的提示样式
@{writeOnEditing} .md-image[data-src*="#cardd"]::after {
    content: "Postcard Dual / 明信片双卡";
    text-transform: uppercase;
    font: @syntaxTipsFont;
    background-color: var(--pn-c);
    padding: 1em;
    display: block;
    width: fit-content;
}

@{writeOnHTML} blockquote img[src*="#card"],
@{writeOnHTML} blockquote svg[data-inject-url*="#card"] {
    width: 100%;
}
// 明信片带 #border 时，导出后的微调（未指定色号时）
// #write > p:has(img[src*="#card"]) { // 仅针对正文下段落
//     width: fit-content;
// }
// #write :is(p, blockquote):has(img[src*="#card"]) {
#write p:has(img[src*="#card"]:not([src*="#fill"])) {
    width: fit-content;
}
// #write :is(p, blockquote):has(img[src*="#card"][src*="#border"]) {
//     width: fit-content;
// }
// 针对引用块分栏内的图片（考虑图片宽度较小的情况，居中）
// #write @{hr_MdHr}+blockquote>p:has(img[src*="#card"]),
// #write @{n2Hr_MdHr}+blockquote>p:has(img[src*="#card"]),
// #write @{n3Hr_MdHr}+blockquote>p:has(img[src*="#card"]),
// #write @{n4Hr_MdHr}+blockquote>p:has(img[src*="#card"]) {
//     margin-left: auto !important;
//     margin-right: auto !important;
//     display: block;
// }
// #write @{hr_MdHr}+@{quote_details_gsa}>p,
// #write @{hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa},
// #write @{hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa},
// #write @{hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa} {
// }

// 明信片边框
#write p:has(img[src*="#card"][src*="#border"]) {
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    background: linear-gradient(180deg, var(--ac-gy-fade), var(--ac-gy), var(--ac-gy-fade)) !important;
    padding: 1px;
}
// 针对 cardd Card Dual 模式微调
@{writeOnHTML} img[src*="#cardd"]+.v-post-card,
@{writeOnHTML} svg[data-inject-url*="#cardd"]+.v-post-card {
    display: block !important;
    position: initial !important;
    box-shadow: none !important;
    border-radius: 0 0 var(--v-r-b) var(--v-r-b-xc) !important;
    background: linear-gradient(180deg, var(--ac-gy-fade), var(--pn-c) 20px, var(--pn-c)), var(--pn-c);
    transform: none;
}

// 图片地址参数指定图片的显示版式为：logo + border
@{writeOnEditing} .md-image[data-src*="#logo"][data-src*="#border"]>img, // 编辑时
@{writeOnHTML} img[src*="#logo"][src*="#border"],
@{writeOnHTML} svg[data-inject-url*="#logo"][data-inject-url*="#border"] {
    background: none !important;
    // margin-bottom: @figurePadding !important;
    border: @imgBorderWidth solid var(--d-fc-a) !important;
    border-radius: var(--v-r-b) var(--v-r-b-xc) !important;
}

// 生成通过图片地址参数指定图片的按宽度缩放样式
// 方式：像素单位
.genImgZoomW(@zoom, @unit) when (@unit = px) {
    @{writeOnEditing} .md-image[data-src*="#@{zoom}w"]>img, // 编辑时
    @{writeOnHTML} img[src*="#@{zoom}w"],
    @{writeOnHTML} svg[data-inject-url*="#@{zoom}w"] {
        width: ~"@{zoom}px" !important;
    }
}
// 方式：百分比单位
.genImgZoomW(@zoom, @unit) when (@unit = pc) {
    @{writeOnEditing} .md-image[data-src*="#@{zoom}%"]>img, // 编辑时
    @{writeOnHTML} img[src*="#@{zoom}%"],
    @{writeOnHTML} svg[data-inject-url*="#@{zoom}%"] {
        width: ~"@{zoom}%" !important;
    }

    // 针对导出后作为「插图」时的微调
    @{writeOnHTML} .v-caption:has(>img[src*="#@{zoom}%"]),
    @{writeOnHTML} .v-caption:has(>svg[data-inject-url*="#@{zoom}%"]) {
        width: ~"@{zoom}%" !important;
    }
    @{writeOnHTML} .v-caption > img[src*="#@{zoom}%"],
    @{writeOnHTML} .v-caption > svg[data-inject-url*="#@{zoom}%"] {
        width: 100% !important;
    }
}
.genImgZoomW(200, px);
.genImgZoomW(400, px);
.genImgZoomW(600, px);
.genImgZoomW(800, px);
// ---
.genImgZoomW(20, pc);
.genImgZoomW(40, pc);
.genImgZoomW(60, pc);
.genImgZoomW(80, pc);

// 生成通过图片地址参数指定图片的按高度缩放样式
.genImgZoomH(@zoom) {
    @{writeOnEditing} .md-image[data-src*="#@{zoom}h"]>img, // 编辑时
    @{writeOnHTML} img[src*="#@{zoom}h"],
    @{writeOnHTML} svg[data-inject-url*="#@{zoom}h"] {
        vertical-align: top;
        height: ~"@{zoom}px";
    }
}
.genImgZoomH(200);
.genImgZoomH(400);
.genImgZoomH(600);
.genImgZoomH(800);

// 生成通过图片地址参数指定图片的旋转样式
.genImgRotate(@deg) {
    @{writeOnEditing} .md-image[data-src*="#@{deg}deg"]>img, // 编辑时
    @{sharpMagicImgContanier} img[src*="#@{deg}deg"],
    @{sharpMagicImgContanier} svg[data-inject-url*="#@{deg}deg"] {
        transform: ~"rotate(@{deg}deg)";
    }
}
.genImgRotate(180);

// 生成通过图片地址参数指定图片进行水平翻转、垂直翻转的样式
.genImgFlip(@direction) when (@direction = fliph) {
    @{writeOnEditing} .md-image[data-src*="#@{direction}"]>img, // 编辑时
    @{sharpMagicImgContanier} img[src*="#@{direction}"],
    @{sharpMagicImgContanier} svg[data-inject-url*="#@{direction}"] {
        transform: scaleX(-1);
    }
}
.genImgFlip(@direction) when (@direction = flipv) {
    @{writeOnEditing} .md-image[data-src*="#@{direction}"]>img, // 编辑时
    @{sharpMagicImgContanier} img[src*="#@{direction}"],
    @{sharpMagicImgContanier} svg[data-inject-url*="#@{direction}"] {
        transform: scaleY(-1);
    }
}
.genImgFlip(fliph);
.genImgFlip(flipv);

// 生成通过图片地址参数指定图片特效样式：模糊
@{writeOnEditing} .md-image[data-src*="#blur"]>img, // 编辑时
@{sharpMagicImgContanier} img[src*="#blur"],
@{sharpMagicImgContanier} svg[data-inject-url*="#blur"] {
    filter: blur(10px);
}
@{writeOnEditing} .md-image[data-src*="#blur"],
@{sharpMagicImgContanier} .v-blur { // 编辑时，让边缘清晰
    overflow: hidden;
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    display: inline-table;
}

// 生成通过图片地址参数指定图片特效样式：灰度
@{writeOnEditing} .md-image[data-src*="#gray"]>img, // 编辑时
@{sharpMagicImgContanier} img[src*="#gray"],
@{sharpMagicImgContanier} svg[data-inject-url*="#gray"] {
    filter: grayscale(100%);
}

// 生成通过图片地址参数指定图片特效样式：复古色调
@{writeOnEditing} .md-image[data-src*="#aged"]>img, // 编辑时
@{sharpMagicImgContanier} img[src*="#aged"],
@{sharpMagicImgContanier} svg[data-inject-url*="#aged"] {
    filter: sepia(100%);
}

// 生成通过图片地址参数指定图片特效样式：复古色调
@{writeOnEditing} .md-image[data-src*="#invert"]>img, // 编辑时
@{sharpMagicImgContanier} img[src*="#invert"],
@{sharpMagicImgContanier} svg[data-inject-url*="#invert"] {
    filter: invert(100%);
}

// 生成通过图片地址参数指定各类图片滤镜 hover 时恢复原图（取消滤镜）显示
.genImgFilterHover(@filter) {
    @{writeOnEditing} .md-image[data-src*="#@{filter}!"]>img:hover, // 编辑时
    @{sharpMagicImgContanier} img[src*="#@{filter}!"]:hover,
    @{sharpMagicImgContanier} svg[data-inject-url*="#@{filter}!"]:hover {
        filter: none;
    }
}
.genImgFilterHover(invert);
.genImgFilterHover(blur);
.genImgFilterHover(gray);
.genImgFilterHover(aged);

@{writeOnHTML} audio {
    margin: 0 10px 0 10px;
    border-radius: var(--v-r-s) var(--v-r-s-xc);
}

#write sup.md-footnote {
    background: none;
    padding: 0;
    margin-left: .2em;
    margin-right: .2em;
    cursor: var(--cur-pointer);
}

@{writeOnEditing} sup.md-footnote span[md-inline="plain"], // 编辑时
@{writeOnHTML} :is(sup.md-footnote, .v-q sup.md-footnote)>a {
    color: var(--d-bc) !important;
    background: var(--d-fc) !important;
    border-radius: calc(var(--v-r-s) - 2px) calc(var(--v-r-s-xc) - 2px);
    font: var(--v-f-w-bd) 10px var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
    padding: 0 5px;
    margin: 0;
    text-decoration: none;
    box-shadow: none;
    text-shadow: none;
    border-bottom: none;
}

#write sup.md-footnote>a:hover {
    background: var(--d-fc-a)!important;
    box-shadow: none !important;
}

.footnote-line>a:not(.reversefootnote) {
    color: var(--d-fc);
    text-decoration: none;
}

// --------------------
// 按钮链接样式
// 圆角选项详见 common.less
#write a kbd {
    color: @docLibButtonForeColor;
    // 输入光标颜色
    caret-color: @buttonForeColor;
    font: var(--v-f-w-bd) 1em/@paragraphInnerLineHeight var(--v-f-fm-key) !important; // [style] [weight] [size/[line-height]] [family]
    background: @docLibButtonBgColor;
    border: 2px solid @docLibButtonBgColor;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    white-space: pre;
}
#write @{kbdSuper},
#write @{kbdSec} {
    // 输入光标颜色
    caret-color: var(--a-hover-color);
}
#write a kbd > span {
    line-height: 1;
}
@kbdSuper: ~"strong a kbd";
@kbdSec: ~"em a kbd";
@svgGs: ~"svg :is(path,rect,ellipse,polygon)";
// 主要按钮内的 svg 图标（已注入）
#write a kbd>@{svgGs} {
    fill: @docLibButtonForeColor !important;
}
#write a kbd:hover { // 针对引用块着色内的情况
    color: @buttonForeHoverColor;
    background: var(--a-hover-color);
    border-color: var(--a-hover-color);
    box-shadow: none;
}
#write a kbd:hover>@{svgGs} {
    fill: @buttonForeHoverColor !important;
}
#write a kbd:active {
    background: @aActiveColor !important;
    border-color: @aActiveColor !important;
    transition: none !important;
}
// 超级按钮
#write @{kbdSuper} {
    color: var(--d-bc) !important;
    background: var(--d-fc) !important;
    border-color: var(--d-fc) !important;
    outline: 4px solid var(--ac-rd);
    animation: kbd-super 5s ease infinite alternate;
    transition: all var(--v-trans-dur) ease-out;
}
#write @{kbdSuper}>@{svgGs} {
    fill: var(--d-bc) !important;
}
#write @{kbdSuper}:hover {
    color: var(--d-fc) !important;
    background: var(--d-bc) !important;
    border-color: var(--d-bc) !important;
    outline-width: 6px;
}
#write @{kbdSuper}:hover>@{svgGs} {
    fill: var(--d-fc) !important;
}
#write @{kbdSuper}:active {
    background: var(--std-code-shadow) !important;
    border-color: var(--std-code-shadow) !important;
}

// 段落中只有按钮时（一个或多个），会居中显示
// 编辑时（暂未无法实现前后按钮的情况，对于第一个元素是斜体/加粗/链接时，也会匹配该样式）
@{writeOnEditing} p:has(>:is(span[md-inline="em"], span[md-inline="strong"], .md-link):only-child a kbd),
@{writeOnEditing} p:has(>:is(span[md-inline="em"], span[md-inline="strong"], .md-link):first-child ~ :is(span[md-inline="em"], span[md-inline="strong"], .md-link):last-child a kbd),
// 导出后（暂未无法实现前后按钮的情况，对于第一个元素是斜体/加粗/链接时，也会匹配该样式）
@{onHTML} p:has(>:is(em, strong, a):only-child :is(kbd, a kbd)),
@{onHTML} p:has(>:is(em, strong, a):first-child ~ :is(em, strong, a):last-child :is(kbd, a kbd)) {
    text-align: center;
}
// 超级按钮动画
@keyframes kbd-super {
    0% {
        outline-color: var(--ac-rd);
    }
    10% {
        outline-color: var(--ac-og);
    }
    20% {
        outline-color: var(--ac-ye);
    }
    35% {
        outline-color: var(--ac-lm);
    }
    50% {
        outline-color: var(--ac-gn);
    }
    55% {
        outline-color: var(--ac-cy);
    }
    70% {
        outline-color: var(--ac-bu);
    }
    80% {
        outline-color: var(--ac-la);
    }
    100% {
        outline-color: var(--ac-pk);
    }
}

// 次要按钮
#write @{kbdSec} {
    color: var(--ac-t1);
    background: var(--d-bc);
    border-color: var(--ac-t1);
}
// 链接、次要按钮内的 svg 图标（已注入）
#write a>@{svgGs} {
    fill: var(--a-color) !important;
}
#write @{kbdSec}>@{svgGs} {
    fill: var(--ac-t1) !important;
}
#write @{kbdSec}:hover {
    background: var(--ac-t2-a) !important;
    color: var(--a-hover-color) !important;
    border-color: var(--a-hover-color) !important;
}
#write .hover>@{svgGs},
#write a:hover>@{svgGs},
#write @{kbdSec}:hover>@{svgGs} {
    fill: var(--a-hover-color) !important;
}
#write @{kbdSec}:active {
    color: @aActiveColor !important;
    background: lighten(@aActiveColor, 30%) !important;
    border-color: @aActiveColor !important;
}

a,
a img,
img a,
summary,
.v-nav-history > *,
.v-status-bar *,
.v-font-style-opt > *,
.v-new-version,
.v-link-chk-result,
.v-tbl-row-g-btn,
.v-copyright,
.v-copyright-svg-ico,
.v-segment-btn,
.v-toc-item,
.v-toc-item>label,
.md-toc-item,
.v-btn,
.v-audio-mini-control,
.v-chapter-nav-prev,
.v-chapter-nav-doc-title,
.v-chapter-nav-current,
.v-chapter-nav-next,
.v-accent-btn,
.v-textfield-action.hover,
.v-fig-nav-btns,
.v-btn-close-figure-nav,
.v-pip-btn,
.v-doc-lib-item,
.v-interactive,
.v-cap-cntr.expander::before,
rt:hover {
    cursor: var(--cur-pointer);
}

// 引用块小标题
@quoteTitleId1: ~'strong, span[md-inline="strong"]';
@quoteTitleId2: ~'mark, span[md-inline="highlight"]';
@quoteTitleId: ~'>:is(@{quoteTitleId1}, @{quoteTitleId2}):only-child';
@quoteTitle: ~'blockquote>:is(p:first-child, p:first-child+p)@{quoteTitleId}';
#write @{quoteTitle} {
    font-size: @h7FontSize;
    text-align: @h7TextAlign;
    justify-content: @h7TextAlign;
    display: flex;
    align-items: center;
    vertical-align: middle;
    border-bottom: @quoteTitleBorderWidth solid var(--ac-bk-a);
    padding: 0 0 .5em 0;
    margin-bottom: .25em;
}
#write blockquote>p:only-child@{quoteTitleId} {
    border-bottom: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}
// 编辑时，让引用块小标题中的图片等内容能垂直居中
@{writeOnEditing} @{quoteTitle}>:is(strong, mark) {
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    width: 100%;
}
// 引用块小标题前的图片
#write blockquote>p:first-child:has(:is(img, svg, span[md-inline="image"]):only-child) {
    text-align: @h7TextAlign;
    justify-content: @h7TextAlign;
}

// ----------------------------------------
// 标题内链接样式
#write :is(h1,h2,h3,h4,h5,h6) a {
    font-weight: inherit;
}

// 文本链接
#write .v-tag-link,
@{writeOnEditing} a,
@{onHTML} a,
.code-tooltip a {
    color: var(--a-color);
    text-decoration: none;
}

// 文本链接 hover （排除按钮、标签链接）
@{writeOnEditing} a:not(:has(kbd)):not(:has(.v-tag-link)):hover,
@{onHTML} a:not(:has(kbd)):not(:has(.v-tag-link)):hover {
    color: var(--a-hover-color) !important;
    box-shadow: 0 -.3em 0 0 fade(@aHoverColor, 30%) inset;
}

// 文本链接 active （排除按钮、标签链接）
@{writeOnEditing} a:not(:has(kbd)):not(:has(.v-tag-link)):active,
@{onHTML} a:not(:has(kbd)):not(:has(.v-tag-link)):active {
    color: @aActiveColor !important;
    box-shadow: 0 -.3em 0 0 fade(@aActiveColor, 30%) inset;
}

// ----------------------------------------
// 图片地址参数指定在 Dark Mode 时反色
@{writeOnHTML} img[src*="darksrc=invert"],
@{writeOnHTML} svg[data-inject-url*="darksrc=invert"] {
    border-color: var(--img-bd-invert) !important;
    filter: var(--v-invert-dark);
}

@{writeOnEditing} .md-image[data-inject-url*="darksrc=invert"].md-image[data-src*="#line"]>img, // 编辑时
@{writeOnHTML} img[src*="darksrc=invert"][src*="#line"],
@{writeOnHTML} svg[data-inject-url*="darksrc=invert"][data-inject-url*="#line"] {
    background: var(--v-fig-grid-l-invert);
}

@{writeOnEditing} .md-image[data-inject-url*="darksrc=invert"].md-image[data-src*="#block"]>img, // 编辑时
@{writeOnHTML} img[src*="darksrc=invert"][src*="#block"],
@{writeOnHTML} svg[data-inject-url*="darksrc=invert"],[data-inject-url*="#block"] {
    background: var(--v-fig-grid-b-invert);
}

// 链接 hover 时，链接内图片样式
#write a:hover>:is(img, svg) {
    filter: brightness(@hoverBrightness);
    box-shadow: none;
}
#write a:hover>:is(
img[src*="darksrc=invert"],
span>svg[data-inject-url*="darksrc=invert"],
svg[data-inject-url*="darksrc=invert"]) {
    filter: var(--v-invert-dark) brightness(@hoverBrightness);
    box-shadow: none;
}

// ----------------------------------------
// 文本链接内容的标签链接独立入口
#write a>.v-tag-link {
    position: absolute;
    display: none;
    left: 0;
    top: -1.75em;
    font-size: .75em;
    font-weight: bold;
    white-space: nowrap;
    background-color: var(--d-bc);
    border-radius: var(--v-r-s) var(--v-r-s-xc);
    padding: 1px 6px;
    box-shadow: var(--v-fl-sd);
}

#write .v-tag-link:hover {
    color: @buttonForeHoverColor;
    background-color:  var(--a-hover-color);
}
#write .v-tag-link:active {
    background-color: @aActiveColor;
}

// 含标签链接的文本链接
#write a:has(.v-tag-link) {
    position: relative; // 用于实现独立入口的跟随显示
}
// 鼠标 hover 时显示
#write a:hover>.v-tag-link {
    display: block;
}

// 图片的垂直对齐方式
@{writeOnEditing} .md-image,
@{onHTML} :is(p, a, li) svg {
    vertical-align: middle;
}

// ----------------------------------------
// 图片剪影（png）公共样式，结合插件在完成图片加载后添加 enabled 样式进行启用
// SVG 图片须在 HTTP 及不跨域情况下才能实现
// @fillOffset: 50px; // 用于测试
@fillOffset: 12345px;
@{writeOnHTML} img[src*="fill="].enabled,
@{writeOnHTML} :is(a, a kbd)>img[src*="fill="].enabled,
@{writeOnHTML} @{kbdSec}>img[src*="fill="].enabled {
    left: -@fillOffset;
    line-height: 1;
    border-color: transparent;
    position: relative;
}

// 生成预置色号的图片剪影样式
.genImageFill(@color) {
    @{writeOnEditing} .md-image[data-src*="fill=@{color}"i]>img {
        box-shadow: 0 0 0 2px ~"var(--ac-@{color})" !important;
    }
    @{writeOnHTML} img[src*="fill=@{color}"i].enabled {
        filter: drop-shadow(@fillOffset 0 0 ~"var(--ac-@{color})") !important;
    }
}

@{writeOnHTML} img[src*="fill=text"].enabled {
    filter: drop-shadow(@fillOffset 0 0 var(--d-fc)) !important;
}

// 链接
@{writeOnEditing} a>.md-image[data-src*="fill=text"]>img {
    box-shadow: 0 0 0 2px var(--a-color) !important;
}
@{writeOnEditing} a:hover>.md-image[data-src*="fill=text"]>img {
    box-shadow: 0 0 0 2px var(--a-hover-color) !important;
}
@{writeOnHTML} a>img[src*="fill=text"].enabled {
    filter: drop-shadow(@fillOffset 0 0 var(--a-color)) !important;
}
@{writeOnHTML} a:hover>img[src*="fill=text"].enabled {
    filter: drop-shadow(@fillOffset 0 0 var(--a-hover-color)) !important;
}

// 主按钮链接内图片
@{writeOnEditing} a kbd>.md-image[data-src*="fill=text"]>img {
    box-shadow: 0 0 0 2px @buttonForeColor !important;
}
@{writeOnEditing} a kbd:hover>.md-image[data-src*="fill=text"]>img {
    box-shadow: 0 0 0 2px @buttonForeHoverColor !important;
}
@{writeOnHTML} a kbd>img[src*="fill=text"].enabled {
    filter: drop-shadow(@fillOffset 0 0 @docLibButtonForeColor) !important;
}
@{writeOnHTML} a kbd:hover>img[src*="fill=text"].enabled {
    filter: drop-shadow(@fillOffset 0 0 @docLibButtonForeHoverColor) !important;
}

// 次按钮链接内图片
@{writeOnEditing} @{kbdSec}>.md-image[data-src*="fill=text"]>img {
    background: none !important;
    box-shadow: none !important;
}
@{writeOnEditing} @{kbdSec}:hover>.md-image[data-src*="fill=text"]>img {
    background: none !important;
    box-shadow: none !important;
}
@{writeOnHTML} @{kbdSec}>img[src*="fill=text"].enabled {
    filter: drop-shadow(@fillOffset 0 0 var(--ac-t1)) !important;
    height: 1em;
}
@{writeOnHTML} @{kbdSec}:hover>img[src*="fill=text"].enabled {
    filter: drop-shadow(@fillOffset 0 0 var(--a-hover-color)) !important;
}

// 生成预置色号的图片剪影样式
.genImageFill(wn);
.genImageFill(rd);
.genImageFill(og);
.genImageFill(ye);
.genImageFill(lm);
.genImageFill(gn);
.genImageFill(mn);
.genImageFill(ol);
.genImageFill(aq);
.genImageFill(cy);
.genImageFill(bu);
.genImageFill(se);
.genImageFill(la);
.genImageFill(vn);
.genImageFill(pu);
.genImageFill(ro);
.genImageFill(pk);
.genImageFill(gd);
.genImageFill(bn);
.genImageFill(gy);
.genImageFill(wt);
.genImageFill(bk);
.genImageFill(t1);
.genImageFill(t2);

// 页内链接
#write :is(a[class*="md-toc-inner"], a[href^="#"]) {
    cursor: var(--cur-inner);
}
// 针对 VLOOK 文库专用链接
#write a[href*="target=vdl"],
#write a[target="vdl"] {
    cursor: var(--cur-doclib);
}
// 针对 HTTPS 协议
#write a[href^="http://"] {
    cursor: var(--cur-http);
}
#write a[href^="https://"] {
    cursor: var(--cur-https);
}
// 针对 MAILTO 协议
#write a[href^="mailto:"] {
    cursor: var(--cur-email);
}
// 可执行文件
#write :is(a[href$=".exe"], a[href$=".sh"]) {
    cursor: var(--cur-risk);
}

// 标题
#write :is(h1,h2,h3,h4,h5,h6) {
    color: var(--h-f);
    text-align: @headerTextAlign;
    position: relative;
    margin: @h6Margin;
    padding: @headerPadding;
    line-height: @defaultLineHeight;
    font: var(--v-f-w-title) 1em var(--v-f-fm-h); // [style] [weight] [size/[line-height]] [family]
    border-radius: @headerBorderRadius;
    letter-spacing: @headerLetterSpacing;
    width: auto;
}

#write :is(pre, p) {
    width: auto;
}

// 标题内 code 样式
#write :is(h1,h2,h3,h4,h5,h6) code {
    font-size: @codeFontSize;
}

#write h1 {
    color: @h1Color;
    background: @h1Bg;
    padding: @h1Padding;
    margin: @h1Margin;
    font-size: @h1FontSize;
    box-shadow: @h1Shadow;
    -webkit-text-stroke: @h1TextStroke;
    text-stroke: @h1TextStroke;
    text-shadow: @h1TextShadow;
    text-align: @h1TextAlign;
    border-radius: @h1BorderRadius;
    border-left: @h1BorderLeft;
    border-right: @h1BorderRight;
    border-top: @h1BorderTop;
    border-bottom: @h1BorderBottom;
}

#write h2 {
    color: @h2Color;
    background: @h2Bg;
    padding: @h2Padding;
    margin: @h2Margin;
    font-size: @h2FontSize;
    box-shadow: @h2Shadow;
    -webkit-text-stroke: @h2TextStroke;
    text-stroke: @h2TextStroke;
    text-shadow: @h2TextShadow;
    text-align: @h2TextAlign;
    border-radius: @h2BorderRadius;
    border-left: @h2BorderLeft;
    border-right: @h2BorderRight;
    border-top: @h2BorderTop;
    border-bottom: @h2BorderBottom;
}

// 针对 h1 后紧跟 h2，或是只有普通正文段落的情况
#write h1+h2 {
    box-shadow: none;
    background: @continuousHeaderBG;
    margin-top: @hContinuous;
    border: none;
}

#write h3 {
    color: @h3Color;
    background: @h3Bg;
    padding: @h3Padding;
    margin: @h3Margin;
    font-size: @h3FontSize;
    box-shadow: @h3Shadow;
    -webkit-text-stroke: @h3TextStroke;
    text-stroke: @h3TextStroke;
    text-shadow: @h3TextShadow;
    text-align: @h3TextAlign;
    border-radius: @h3BorderRadius;
    border-left: @h3BorderLeft;
    border-right: @h3BorderRight;
    border-top: @h3BorderTop;
    border-bottom: @h3BorderBottom;
}

// 针对 h2 后紧跟 h3，或是只有普通正文段落的情况
#write h2+h3 {
    box-shadow: none;
    background: @continuousHeaderBG;
    margin-top: @hContinuous;
    border: none;
}

#write h4 {
    color: @h4Color;
    background: @h4Bg;
    padding: @h4Padding;
    margin: @h4Margin;
    font-size: @h4FontSize;
    box-shadow: @h4Shadow;
    -webkit-text-stroke: @h4TextStroke;
    text-stroke: @h4TextStroke;
    text-shadow: @h4TextShadow;
    text-align: @h4TextAlign;
    border-radius: @h4BorderRadius;
    border-left: @h4BorderLeft;
    border-right: @h4BorderRight;
    border-top: @h4BorderTop;
    border-bottom: @h4BorderBottom;
    .genH4Ext();
}

// 针对 h3 后紧跟 h4，或是只有普通正文段落的情况
#write h3+h4 {
    box-shadow: none;
    background: @continuousHeaderBG;
    margin-top: @hContinuous;
    border: none;
}

#write h5 {
    color: @h5Color;
    background: @h5Bg;
    padding: @h5Padding;
    margin: @h5Margin;
    font-size: @h5FontSize;
    box-shadow: @h5Shadow;
    -webkit-text-stroke: @h5TextStroke;
    text-stroke: @h5TextStroke;
    text-shadow: @h5TextShadow;
    text-align: @h5TextAlign;
    border-radius: @h5BorderRadius;
    border-left: @h5BorderLeft;
    border-right: @h5BorderRight;
    border-top: @h5BorderTop;
    border-bottom: @h5BorderBottom;
    .genH5Ext();
}

// 针对 h4 后紧跟 h5，或是只有普通正文段落的情况
#write h4+h5 {
    box-shadow: none;
    background: @continuousHeaderBG;
    margin-top: @hContinuous;
    border: none;
}

#write h6 {
    color: @h6Color;
    margin-bottom: 0;
    padding-left: 0;
    font: var(--v-f-w-bd) @h6FontSize var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    box-shadow: @h6Shadow;
    -webkit-text-stroke: @h6TextStroke;
    text-stroke: @h6TextStroke;
    text-shadow: @h6TextShadow;
    text-align: @h6TextAlign;
    border-left: @h6BorderLeft;
    border-right: @h6BorderRight;
    border-top: @h6BorderTop;
    border-bottom: @h6BorderBottom;
    background: none;
}
@{coverAfterYAML}::after,
@{coverWithoutYAML}::after,
@{backcover}::after,
#write @{quote_details} h6::after {
    margin-left: 0;
    padding-bottom: 0;
    border: none;
}

#write :is(
h1+h6,
h2+h6,
h3+h6,
h4+h6,
h5+h6,
h6+h6) {
    margin-top: 0;
}

#write li>h6 {
    // 用于：子表
    color: var(--h-f);
    border-left: 0;
    padding-left: 0;
}

// @{onHTML} :is(strong, mark),
// @{writeOnEditing} :is(strong, mark) {
@{onHTML} strong,
@{writeOnEditing} strong {
    font-family: var(--v-f-fm-bd);
    font-weight: var(--v-f-w-bd);
    line-height: 1;
}

// @{onHTML} :is(strong, mark) a,
// @{writeOnEditing} :is(strong, mark) a {
@{onHTML} strong a,
@{writeOnEditing} strong a {
    font-weight: var(--v-f-w-bd);
}

#write hr {
    margin-top: 1em;
    margin-bottom: .5em;
    border: 2px solid var(--ac-bk-fade);
    overflow: hidden;
    box-sizing: content-box;
    border-top: 0;
}

body>div>h1:first-of-type {
    border-top: 0;
}

body>h2:first-child {
    margin-top: 0;
    padding-top: 0;
}

body>h1:first-child {
    margin-top: 0;
    padding-top: 0;
}

body>h1:first-child+h2 {
    margin-top: 0;
    padding-top: 0;
}

body>:is(
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child) {
    margin-top: 0;
    padding-top: 0;
}

#write a:first-child>:is(h1,h2,h3,h4,h5,h6) {
    margin-top: 0;
    padding-top: 0;
}

// 明信片样式
// 重点说明：（** 移动端相关样式进行同步调整）
#write .v-post-card {
    color: var(--d-fc);
    background: var(--pn-c);
    position: absolute;
    display: none;
    overflow: hidden;
    padding: 10px 20px;
    border-radius: var(--v-r-b) var(--v-r-b-xc);

    left: 50%;
    transform: translateX(-50%);
}
#write .v-post-card.hover.v-backdrop-blurs.enabled {
    background: rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), .8);
    border: 1px solid var(--pn-c-a);
}
#write .v-post-card>.v-card-title {
    font-weight: var(--v-f-w-title);
    font-size: 1.25em;
    padding-top: .5em;
}
#write .v-post-card>.v-card-text p {
    margin-top: 0;
}
#write .v-post-card>.v-card-title+.v-card-text {
    padding: 5px 0 0 0;
}

// 编辑时的微调
@{writeOnEditing} h6 + figure,
@{writeOnEditing} p:has(@{cap_prefix}) + figure {
    margin-top: 0;
}
// 针对导出后微调
@{writeOnHTML} figure,
@{writeOnHTML} figcaption {
    position: relative;
}
.md-diagram-panel {
    padding-bottom: @scrollFix; // 针对 Mermaid 图表，不添加会导致出现滚动条
}

// 有序、无序列表符号样式
#write ::marker {
    color: @liBeforeColor;
    font-family: var(--v-f-fm-tag);
}
@{writeOnEditing} li.md-focus-container::marker {
    color: var(--a-hover-color);
    font-weight: bold;
}

// 有序、无序列表能用样式
#write :is(ul, ol) {
    padding-left: 1.5em;
    padding-bottom: 0;
    margin-top: .625em;
}
// 除图片插图外的段落样式
#write>p {
    margin-top: @paragraphPadding;
}

// ----------------------------------------
// 段落间距样式
#write p,
#write li {
    margin-top: @paragraphPadding;
    margin-bottom: 0;
    word-break: normal;
    word-wrap: break-word;
}
#write li @{quote_details} {
    margin: .5em 0 0 0;
}
// 从 Typora 1.10.2-dev 默认值变为了 static 为兼容 Mermaid
// 与长内容折叠有关，故需要调整为该内容
@{onHTML} #write p {
    position: relative;
}

// 没有子元素的 p 元素，即空白行、无内容、空段落
#write>p:not(:has(*)),
#write @{quote_details_gsa}>p:not(:has(*)) {
    margin: 0;
    padding: 0;
    height: 15px !important;
}

#write @{quote_details}>p:first-child,
#write @{quote_details}>ol:first-child,
#write @{quote_details}>ul:first-child,
#write @{quote_details}>ol:first-child>li:first-child,
#write @{quote_details}>ul:first-child>li:first-child,
#write @{quote_details}>ol:first-child>li:first-child>p,
#write @{quote_details}>ul:first-child>li:first-child>p {
    margin-top: 0 !important;
}

// 有序列表
#write ol>li { // 1 级
    list-style-type: @ol1StyleType;
}
#write ol>li>ol>li { // 2 级
    list-style-type: @ol2StyleType;
}
#write ol>li>ol>li>ol>li { // 3 级
    list-style-type: @ol3StyleType;
}
#write ol>li>ol>li>ol>li>ol>li { // 4 级
    list-style-type: @ol4StyleType;
}
#write ol>li>ol>li>ol>li>ol>li>ol>li { // 5 级
    list-style-type: @ol5StyleType;
}
#write ol>li>ol>li>ol>li>ol>li>ol>li>ol>li { // 6 级
    list-style-type: @ol6StyleType;
}

// 无序列表
#write ul>li { // 1 级
    list-style-type: @ul1StyleType;
}
#write ul>li>ul>li { // 2 级
    list-style-type: @ul2StyleType;
}
#write ul>li>ul>li>ul>li { // 3 级
    list-style-type: @ul3StyleType;
}
#write ul>li>ul>li>ul>li>ul>li { // 4 级
    list-style-type: @ul4StyleType;
}
#write ul>li>ul>li>ul>li>ul>li>ul>li { // 5 级
    list-style-type: @ul5StyleType;
}
#write ul>li>ul>li>ul>li>ul>li>ul>li>ul>li { // 6 级
    list-style-type: @ul6StyleType;
}

#write :is(ol>li>ol>li, ul>li>ul>li)::before {
    color: var(--ac-t2-lg) !important;
}

#write @{quote_details}[data-quote-group]+figcaption {
    margin-top: 1em;
}

#write>@{quote_details},
#write>@{quote_details}>@{quote_details},
#write .md-alert>@{quote_details},
body:not([class]) blockquote { // 用于在 Typora 中的进行主题预览
    background: @quoteBgDefault;
    box-shadow: @quoteBoxShadowDefault;
    border-radius: @quoteRadius;
    padding: .75em;
    margin-top: @paragraphPadding;
    margin-bottom: 0;
}
#write>@{quote_details} @{quote_details},
#write .md-alert @{quote_details} {
    border-radius: 0;
}
#write .md-alert @{quote_details} {
    box-shadow: none;
}
#write>@{quote_details_gsa} {
    margin-top: @paragraphPadding;
    margin-bottom: 0;
}
// 导出后的微调
@{writeOnHTML}>@{quote_details_gsa} {
    margin-top: @paragraphPadding * 2;
}

// 详情展开后的标题
@{writeOnHTML} details[open]>summary {
    border-bottom: @quoteTitleBorderWidth solid var(--ac-bk-a);
    padding-bottom: .5em;
    margin-bottom: .25em;
}
@{writeOnHTML} details[open]>summary>.v-svg-details {
    opacity: 0;
}
@{writeOnHTML} details[open]:hover>summary>.v-svg-details {
    opacity: @opacityForOpened;
}

summary {
    font: var(--v-f-w-bd) @h7FontSize var(--v-f-fm-subtitle);
    color: var(--a-color);
    text-align: @h7TextAlign;
    justify-content: @h7TextAlign;
    display: flex;
    align-items: center;
    vertical-align: middle;
    line-height: 1;
    white-space: pre-wrap;
}
summary.hover {
    color: var(--a-hover-color) !important;
}
summary:active {
    color: @aActiveColor !important;
}
// 折叠标题上有图片剪影颜色为 text 的情况
@svgNodes: ~":is(circle, polygon, path, rect)";
summary.hover>svg[data-img-fill="text"]>@{svgNodes} {
    fill: var(--d-fc) !important;
}

// 隐藏 details 默认的三角符号
summary::marker {
    display: none;
    font-size: 0;
}
summary::-webkit-details-marker {
    display: none;
}
summary::-moz-list-bullet {
    font-size: 0;
}

// --------------------
// 引用块分栏

@quote_alert: ~":is(blockquote, .md-alert)";
@{writeOnEditing} .md-hr+@{quote_alert}::before {
    color: var(--d-fc-a);
    font: @syntaxTipsFont;
    text-transform: uppercase;
    text-align: center;
    white-space: pre;
    padding: 0 .75em;
    margin-left: -1.3em;
    position: absolute;
    width: auto;
    left: 33px;
    right: @writePaddingRight;
    opacity: 1;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, transparent 5%, var(--d-bc) 15%, var(--d-bc) 85%, transparent 95%, transparent);
}
// 在引用块分栏内嵌引用块分栏的微调
@{writeOnEditing} .md-hr+@{quote_alert} .md-hr+@{quote_alert}::before {
    background: linear-gradient(90deg, transparent 5%, var(--d-bc) 10%, var(--d-bc) 90%, transparent);
    right: unset;
}
@{writeOnEditing} .md-hr+@{quote_alert}::before {
    content: "    ⬛︎ ⬛︎  2 Columns of Quote / 双栏引用块  ⬛︎ ⬛︎    ";
    margin-top: -3.8em;
    line-height: 2em;
}
// 针对明信片 card cardd 的微调
@{writeOnEditing} .md-hr+@{quote_alert}:has(.md-image[data-src*="#card"])::before {
    margin-top: -2.75em;
}
@{writeOnEditing} .md-hr+.md-hr+@{quote_alert}::before {
    content: "    ⬛︎ ⬛︎ ⬛︎  3 Columns of Quote / 三栏引用块  ⬛︎ ⬛︎ ⬛︎    ";
    margin-top: -3.7em;
    line-height: 2em;
}
// 针对明信片 card cardd 的微调
@{writeOnEditing} .md-hr+.md-hr+@{quote_alert}:has(.md-image[data-src*="#card"])::before {
    margin-top: -2.5em;
}
@{writeOnEditing} .md-hr+.md-hr+.md-hr+@{quote_alert}::before {
    content: "    ⬛︎ ⬛︎ ⬛︎ ⬛︎  4 Columns of Quote / 四栏引用块  ⬛︎ ⬛︎ ⬛︎ ⬛︎    ";
    margin-top: -4.2em;
    line-height: 2.5em;
}
// 针对明信片 card cardd 的微调
@{writeOnEditing} .md-hr+.md-hr+.md-hr+@{quote_alert}:has(.md-image[data-src*="#card"])::before {
    margin-top: -2.75em;
}
// -----
@quote_details: ~":is(blockquote, details)";
@quote_details_gsa: ~":is(blockquote, details, .md-alert)";
@hr_MdHr: ~":is(hr, .md-hr)";
@n2Hr_MdHr: ~":is(hr+hr, .md-hr+.md-hr)";
@n3Hr_MdHr: ~":is(hr+hr+hr, .md-hr+.md-hr+.md-hr)";
@n4Hr_MdHr: ~":is(hr+hr+hr+hr, .md-hr+.md-hr+.md-hr+.md-hr)";
// 以双栏方式显示，49*2+2*1=100
#write @{hr_MdHr}+@{quote_details_gsa},
#write @{hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa} {
    color: var(--d-fc);
    display: inline-block !important;
    max-width: 49% !important;
    min-width: 49% !important;
    vertical-align: top;
}
// 双栏内容之间的样式
#write @{hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa} {
    margin-left: 2% !important;
}

// -----
// 以三栏方式显示，32*3+2*2=100
#write @{n2Hr_MdHr}+@{quote_details_gsa},
#write @{n2Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa},
#write @{n2Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa} {
    color: var(--d-fc);
    display: inline-block !important;
    max-width: 32% !important;
    min-width: 32% !important;
    vertical-align: top;
}
// 三栏内容之间的样式
#write @{n2Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa},
#write @{n2Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa} {
    margin-left: 2% !important;
}

// -----
// 以四栏方式显示，23.5*4+2*3=100
#write @{n3Hr_MdHr}+@{quote_details_gsa},
#write @{n3Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa},
#write @{n3Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa},
#write @{n3Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa} {
    color: var(--d-fc);
    display: inline-block !important;
    max-width: 23.5% !important;
    min-width: 23.5% !important;
    vertical-align: top;
}
// 四栏内容之间的样式
#write @{n3Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa},
#write @{n3Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa},
#write @{n3Hr_MdHr}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa}+@{quote_details_gsa} {
    margin-left: 2% !important;
}

// 引用块内的双栏、三栏、四栏
#write @{quote_details}>@{hr_MdHr}+@{quote_details},
#write @{quote_details}>@{hr_MdHr}+@{quote_details}+@{quote_details},
#write @{quote_details}>@{hr_MdHr}+@{quote_details}+@{quote_details}+@{quote_details},
#write @{quote_details}>@{hr_MdHr}+@{quote_details}+@{quote_details}+@{quote_details}+@{quote_details} {
    border: none;
    background: var(--d-bc) !important;
    border-radius: var(--v-r-s) var(--v-r-s-xc);
    padding: .75em 1em;
    margin-top: .75em;
}

#write blockquote h6 {
    padding: 0;
    margin-top: 0;
    color: var(--d-fc);
    font-size: 1.125em;
}

#write blockquote h6 a {
    margin-left: -.1em;
}

#write blockquote h6::before {
    content: "" !important;
    margin-left: 0 !important;
}

// 代码块相关样式
.CodeMirror-scroll {
    border-radius: 0 0 calc(var(--v-r-t) - 2px) calc(var(--v-r-t-xc) - 2px);
}

.CodeMirror-sizer {
    background: var(--d-bc);
}

.CodeMirror pre {
    padding: 0 10px;
}

// 代码块行的换行方式
.md-fences.unwrap .CodeMirror-line {
    white-space: pre !important;
    overflow-y: auto;
}

// 代码块行的 hover 样式
.CodeMirror-line:hover {
    background-color: var(--ac-t1-fade);
}

.CodeMirror.cm-s-inner {
    background: var(--d-bc);
    padding: 2px;
}

// 针对 ```math 语法的公式
.md-fences .CodeMirror.cm-s-inner[lang="math"] {
    border-radius: var(--v-r-t) var(--v-r-t-xc) 0 0;
}
// 非 ```math 语法的公式
.md-fences .CodeMirror.cm-s-inner:not([lang="math"]) {
    border-radius: 0 0 var(--v-r-t) var(--v-r-t-xc) !important;
}
.v-caption.codeblock[data-cap-count="2"] .md-fences .CodeMirror.cm-s-inner:not([lang="math"]) {
    border-radius: 0 !important;
}
// 编辑时
@{writeOnEditing} .md-diagram .CodeMirror.cm-s-inner {
    border-radius: var(--v-r-t) var(--v-r-t-xc) 0 0 !important;
}

.CodeMirror div.CodeMirror-cursor {
    border-left: 2px solid var(--cm-CodeMirror-cursor);
}

.CodeMirror-gutters {
    border-width: 0;
    border-right: 1px solid var(--pn-c);
    height: 100% !important; // 避免代码块的题注 hover 样式的背景色透出
}

.CodeMirror-linenumber {
    color: var(--d-fc-a);
    font-family: var(--v-f-fm-num);
    min-width: fit-content !important; // 避免某些窄字体，总行数为 11 行号时，第 10 行会错位
}
// 代码块获得焦点后，突出当前行号
@{writeOnEditing} .CodeMirror-focused .CodeMirror-activeline-gutter>.CodeMirror-linenumber {
    color: var(--h-f) !important;
    font-weight: var(--v-f-w-bd);
}

.cm-s-inner :is(.cm-variable, .cm-operator, .cm-property) {
    color: var(--cm-variable);
}

.cm-s-inner .cm-variable-2 {
    color: var(--cm-variable-2);
}

.cm-s-inner .cm-variable-3 {
    color: var(--cm-variable-3);
}

.cm-s-inner .cm-keyword {
    color: var(--cm-keyword);
}

.cm-s-inner .cm-tag {
    color: var(--cm-tag);
}

.cm-s-inner .cm-attribute {
    color: var(--cm-attribute);
}

.cm-s-inner .cm-string {
    color: var(--cm-string);
}

.cm-s-inner .cm-string-2 {
    color: var(--cm-string-2);
}

.cm-s-inner .cm-comment,
.cm-s-inner.cm-comment {
    color: var(--cm-comment);
}

.cm-s-inner :is(.cm-header, .cm-def),
.cm-s-inner.cm-header,
.cm-s-inner.cm-def {
    color: var(--cm-header);
}

.cm-s-inner .cm-quote,
.cm-s-inner.cm-quote {
    color: var(--cm-quote);
}

.cm-s-inner .cm-hr {
    color: var(--cm-hr);
}

.cm-s-inner .cm-link {
    color: var(--cm-link);
    text-decoration: none;
    border-bottom: 1px solid var(--cm-link);
}

.cm-s-inner .cm-negative {
    color: var(--cm-negative);
}

.cm-s-inner .cm-positive {
    color: var(--cm-positive);
}


.cm-s-inner :is(.cm-meta, .cm-qualifier) {
    color: var(--cm-meta);
}

.cm-s-inner .cm-builtin {
    color: var(--cm-bulidin);
}

.cm-s-inner .cm-bracket {
    color: var(--cm-bracket);
}

.cm-s-inner .cm-atom,
.cm-s-inner.cm-atom {
    color: var(--cm-atom);
}

.cm-s-inner .cm-number {
    color: var(--cm-number);
}

// 代码块相关样式
#write .md-fences {
    padding: 0;
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    width: 100%;
}

// 代码块内代码区域
#write .md-fences .CodeMirror-lines {
    background: var(--c-blk-bg);
    background-size: @codeBlockBackgroundSize;
    background-repeat: @codeBlockBackgroundRepeat;
    background-position: @codeBlockBackgroundPosition;
}

// 编辑时
// 排除 mermaid 图表、```math 语法的公式
@{writeOnEditing} .md-fences:not([class*="md-diagram"]):not([lang="math"])::before {
    content: attr(lang) " ";
    text-transform: uppercase;
    white-space: pre-wrap;
    background-color: var(--std-code-shadow);
    background-image: var(--v-i-sys-menu);
    background-repeat: no-repeat;
    background-position: 7px center;
    padding: 4px 4px 4px 70px;
    color: var(--d-fc);
    font-family: var(--v-f-fm-bd);
    font-weight: bold;
    font-size: .875em;
    width: 100%;
    display: block;
    border-radius: var(--v-r-t) var(--v-r-t-xc) 0 0;
}

// --------------------
// 列表分栏

// 列表分栏内容微调
#write @{hr_MdHr}+ul,
#write @{hr_MdHr}+ol {
    text-align: center;
    padding-left: 0 !important;
    margin-top: 0;
}
#write @{hr_MdHr}+ul>li,
#write @{hr_MdHr}+ol>li {
    text-align: left;
    box-shadow: 0 0 0 2px var(--std-code-shadow) inset;
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    margin-top: 1em !important;
    margin-bottom: 0;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    background-color: var(--d-bc);
    list-style: none;
}
// 分栏块中的首行
#write @{hr_MdHr}+ul>li>p:first-of-type,
#write @{hr_MdHr}+ol>li>p:first-of-type {
    font: var(--v-f-w-bd) 1em var(--v-f-fm-bd);
    color: var(--d-fc);
    background: var(--std-code-shadow);
    padding: 5px;
    border-radius: var(--v-r-t) var(--v-r-t-xc) 0 0;
    text-align: center;
    margin-top: 0;
    margin-left: -10px;
    margin-right: -10px;
    width: auto;
}
// 内嵌的文本链接编辑时样式
#write @{hr_MdHr}+ul>li>p:first-of-type .md-link .md-url {
    color: var(--a-color);
}
// 鼠标 hover 微调
@listColumnHoverFill: var(--d-fc-a);
#write @{hr_MdHr}+ul>li:hover>p:first-of-type,
#write @{hr_MdHr}+ol>li:hover>p:first-of-type {
    color: var(--d-bc) !important;
    background: @listColumnHoverFill !important;
}
#write @{hr_MdHr}+ul>li:hover,
#write @{hr_MdHr}+ol>li:hover {
    box-shadow: 0 0 0 2px @listColumnHoverFill inset;
}
// 列表分栏提示样式
@{writeOnEditing} .md-hr+ul::before,
@{writeOnEditing} .md-hr+ol::before {
    background: linear-gradient(90deg, transparent, transparent 5%, var(--d-bc) 15%, var(--d-bc) 85%, transparent 95%, transparent);
    color: var(--d-fc-a);
    font: @syntaxTipsFont;
    text-transform: uppercase;
    text-align: center;
    white-space: pre;
    padding: 0 10px;
    margin-left: 0;
    position: absolute;
    width: auto;
    left: 0;
    right: 0;
    opacity: 1;
    pointer-events: none;
}
@{writeOnEditing} .md-hr+:is(ul, ol)::before {
    content: "⬛︎ ⬛︎  2 Columns of List / 双栏列表  ⬛︎ ⬛︎";
    margin-top: -1.8em;
    line-height: 2em;
}
@{writeOnEditing} .md-hr+.md-hr+:is(ul, ol)::before {
    content: "⬛︎ ⬛︎ ⬛︎  3 Columns of List / 三栏列表  ⬛︎ ⬛︎ ⬛︎";
    margin-top: -1.8em;
    line-height: 2em;
}
@{writeOnEditing} .md-hr+.md-hr+.md-hr+:is(ul, ol)::before {
    content: "⬛︎ ⬛︎ ⬛︎ ⬛︎  4 Columns of List / 四栏列表  ⬛︎ ⬛︎ ⬛︎ ⬛︎ ";
    margin-top: -1.8em;
    line-height: 2.2em;
}
@{writeOnEditing} .md-hr+.md-hr+.md-hr+.md-hr+:is(ul, ol)::before {
    content: "⬛︎ ⬛︎ ⬛︎ ⬛︎ ⬛︎  5 Columns of List / 五栏列表  ⬛︎ ⬛︎ ⬛︎ ⬛︎ ⬛︎";
    margin-top: -1.8em;
    line-height: 3em;
}

// -----
@n2Li: ~"li+li";
@n3Li: ~"li+li+li";
@n4Li: ~"li+li+li+li";
@n5Li: ~"li+li+li+li+li";
// 以双栏方式显示列表，49*2+0.5*2*2=100
#write @{hr_MdHr}+ul>li,
#write @{hr_MdHr}+ul>@{n2Li},
#write @{hr_MdHr}+ol>li,
#write @{hr_MdHr}+ol>@{n2Li} {
    display: inline-block !important;
    vertical-align: top;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 49% !important;
    min-width: 49% !important;
}
// 双栏列表内容之间的样式
#write @{hr_MdHr}+ul>@{n2Li},
#write @{hr_MdHr}+ol>@{n2Li} {
    margin-left: 2% !important;
}
// 每两个分栏首个列表微调
#write @{hr_MdHr}+ul>li:nth-of-type(2n+1),
#write @{hr_MdHr}+ol>li:nth-of-type(2n+1) {
    margin-left: 0 !important;
}
// 双栏的有序列表微调
#write @{hr_MdHr}+ul ol>li,
#write @{hr_MdHr}+ol ol>li {
    margin-left: .5em !important;
}

// -----
// 以三栏方式显示列表，32*3+2*2=100
#write @{n2Hr_MdHr}+ul>li,
#write @{n2Hr_MdHr}+ul>@{n2Li},
#write @{n2Hr_MdHr}+ul>@{n3Li},
#write @{n2Hr_MdHr}+ol>li,
#write @{n2Hr_MdHr}+ol>@{n2Li},
#write @{n2Hr_MdHr}+ol>@{n3Li} {
    display: inline-block !important;
    vertical-align: top;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 32% !important;
    min-width: 32% !important;
}
// 三栏列表内容之间的样式
#write @{n2Hr_MdHr}+ul>@{n2Li},
#write @{n2Hr_MdHr}+ul>@{n3Li},
#write @{n2Hr_MdHr}+ol>@{n2Li},
#write @{n2Hr_MdHr}+ol>@{n3Li} {
    margin-left: 2% !important;
}
// 每三个分栏首个列表微调
#write @{n2Hr_MdHr}+ul>@{n2Li}:nth-of-type(3n+1),
#write @{n2Hr_MdHr}+ul>@{n3Li}:nth-of-type(3n+1),
#write @{n2Hr_MdHr}+ol>@{n2Li}:nth-of-type(3n+1),
#write @{n2Hr_MdHr}+ol>@{n3Li}:nth-of-type(3n+1) {
    margin-left: 0 !important;
}
// 三栏的有序列表微调
#write @{n2Hr_MdHr}+ul ol>li,
#write @{n2Hr_MdHr}+ol ol>li {
    margin-left: .5em !important;
}

// -----
// 以四栏方式显示列表，23.5*4+2*3=100
#write @{n3Hr_MdHr}+ul>li,
#write @{n3Hr_MdHr}+ul>@{n2Li},
#write @{n3Hr_MdHr}+ul>@{n3Li},
#write @{n3Hr_MdHr}+ul>@{n4Li},
#write @{n3Hr_MdHr}+ol>li,
#write @{n3Hr_MdHr}+ol>@{n2Li},
#write @{n3Hr_MdHr}+ol>@{n3Li},
#write @{n3Hr_MdHr}+ol>@{n4Li} {
    display: inline-block !important;
    vertical-align: top;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 23.5% !important;
    min-width: 23.5% !important;
}
// 四栏列表内容之间的样式
#write @{n3Hr_MdHr}+ul>@{n2Li},
#write @{n3Hr_MdHr}+ul>@{n3Li},
#write @{n3Hr_MdHr}+ul>@{n4Li},
#write @{n3Hr_MdHr}+ol>@{n2Li},
#write @{n3Hr_MdHr}+ol>@{n3Li},
#write @{n3Hr_MdHr}+ol>@{n4Li} {
    margin-left: 2% !important;
}
// 每四个分栏首个列表微调
#write @{n3Hr_MdHr}+ul>@{n2Li}:nth-of-type(4n+1),
#write @{n3Hr_MdHr}+ul>@{n3Li}:nth-of-type(4n+1),
#write @{n3Hr_MdHr}+ul>@{n4Li}:nth-of-type(4n+1),
#write @{n3Hr_MdHr}+ol>@{n2Li}:nth-of-type(4n+1),
#write @{n3Hr_MdHr}+ol>@{n3Li}:nth-of-type(4n+1),
#write @{n3Hr_MdHr}+ol>@{n4Li}:nth-of-type(4n+1) {
    margin-left: 0 !important;
}
// 四栏的有序列表微调
#write @{n3Hr_MdHr}+ul ol>li,
#write @{n3Hr_MdHr}+ol ol>li {
    margin-left: .5em !important;
}

// -----
// 以五栏方式显示列表，19.2*5+1*4=100
#write @{n4Hr_MdHr}+ul>li,
#write @{n4Hr_MdHr}+ul>@{n2Li},
#write @{n4Hr_MdHr}+ul>@{n3Li},
#write @{n4Hr_MdHr}+ul>@{n4Li},
#write @{n4Hr_MdHr}+ul>@{n5Li},
#write @{n4Hr_MdHr}+ol>li,
#write @{n4Hr_MdHr}+ol>@{n2Li},
#write @{n4Hr_MdHr}+ol>@{n3Li},
#write @{n4Hr_MdHr}+ol>@{n4Li},
#write @{n4Hr_MdHr}+ol>@{n5Li} {
    display: inline-block !important;
    vertical-align: top;
    max-width: 19.2% !important;
    min-width: 19.2% !important;
}
// 五栏列表内容之间的样式
#write @{n4Hr_MdHr}+ul>@{n2Li},
#write @{n4Hr_MdHr}+ul>@{n3Li},
#write @{n4Hr_MdHr}+ul>@{n4Li},
#write @{n4Hr_MdHr}+ol>@{n2Li},
#write @{n4Hr_MdHr}+ol>@{n3Li},
#write @{n4Hr_MdHr}+ol>@{n4Li} {
    margin-left: 1% !important;
}
// 每五个分栏首个列表微调
#write @{n4Hr_MdHr}+ul>@{n2Li}:nth-of-type(5n+1),
#write @{n4Hr_MdHr}+ul>@{n3Li}:nth-of-type(5n+1),
#write @{n4Hr_MdHr}+ul>@{n4Li}:nth-of-type(5n+1),
#write @{n4Hr_MdHr}+ul>@{n5Li}:nth-of-type(5n+1),
#write @{n4Hr_MdHr}+ol>@{n2Li}:nth-of-type(5n+1),
#write @{n4Hr_MdHr}+ol>@{n3Li}:nth-of-type(5n+1),
#write @{n4Hr_MdHr}+ol>@{n4Li}:nth-of-type(5n+1),
#write @{n4Hr_MdHr}+ol>@{n5Li}:nth-of-type(5n+1) {
    margin-left: 0 !important;
}
// 五栏的有序列表微调
#write @{n4Hr_MdHr}+ul ol>li,
#write @{n4Hr_MdHr}+ol ol>li {
    margin-left: .5em !important;
}

// 列表内的引用块（非分栏）
#write li>@{quote_details},
// 引用内的引用块、折叠（非分栏）
// #write>@{quote_details}>@{quote_details} {
#write @{quote_details}>@{quote_details} {
    border-left: @defQuoteBorderWidth solid fade(@accColorGray, 20%);
    box-shadow: none;
    background: none;
    border-radius: 0;
    padding: 0 .5em;
}
// 引用块内的最后一个引用块
#write @{quote_details}>@{quote_details}:last-child,
#write @{quote_details}>:is(ol,ul):last-child {
    margin-bottom: 0;
}

// 引用块的引用块（分栏）
#write :is(li>hr, li>.md-hr)+:is(blockquote, blockquote+blockquote, blockquote+blockquote+blockquote, blockquote+blockquote+blockquote+blockquote),
#write :is(li>hr, li>.md-hr)+:is(details, details+details, details+details+details, details+details+details+details) {
    border: none;
    background: var(--blockquote-bg);
    border-radius: var(--v-r-s) var(--v-r-s-xc);
    padding: .75em 1em;
}

#write @{quote_details}>strong {
    color: inherit !important;
}

// 无效图片样式
.v-img-lost {
    background: var(--ac-rd) !important;
    border: none;
    width: 200px;
    height: 50px;
    left: 0 !important; // 修正剪影样式的 left: -12345px
}

// 坏链列表
.v-link-info-list {
    display: none;
    padding: 0;
    position: fixed;
    color: var(--d-fc);
    top: @floatTopBottom;
    bottom: @floatTopBottom;
    right: @writePaddingRight;
    line-height: @paragraphInnerLineHeight;
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    background: var(--pn-c);
    z-index: 4500;
}
.v-link-info-list[data-content-type="history"] {
    width: var(--v-nav-center-w);
}
.v-link-info-list[data-content-type="checked"] {
    width: calc(var(--v-nav-center-w) * 1.25);
}
.v-link-info-list[data-content-type="map"]{
    width: 50%;
}
.v-link-info-list-header {
    position: absolute;
    z-index: 10;
    display: none;
    border-radius: var(--v-r-b) var(--v-r-b-xc) 0 0;
    top: 0;
    left: 0;
    height: 20px;
    width: 100%;
    background: linear-gradient(180deg, @pnMoreContentLg);
    pointer-events: none;
}
.v-link-info-list-body {
    padding-top: 0;
    height: 100%;
    z-index: 0;
}

.v-link-info-list-items {
    overflow-y: scroll;
    height: 100%;
}

:is(
.v-toc-body .md-toc,
.v-link-info-list-items,
.v-index-filter-result.toc,
.v-index-filter-result.figure,
.v-index-filter-result.table,
.v-index-filter-result.codeblock,
.v-index-filter-result.formula,
.v-index-filter-result.media)[data-no-more]::after {
    content: attr(data-no-more);
    line-height: 2;
    text-align: center;
    opacity: .5;
    padding: 10px;
    position: relative;
    display: block;
    pointer-events: none;
}

// 异常链接类型通用样式
.v-link-info-list-items > :is(.warning, .error-hash, .error-address) > label {
    background-clip: text;
    -webkit-background-clip: text;  /* 只将背景颜色应用于文本 */
    color: transparent;  /* 隐藏默认的emoji颜色 */
}
.v-link-info-list-items > .warning > label {
    background-color: var(--ac-og);  /* 背景颜色 */
}
.v-link-info-list-items > .error-hash > label {
    background-color: var(--ac-rd);
}
.v-link-info-list-items > .error-address > label {
    background-color: var(--ac-rd);
}
.v-link-info-list-footer {
    position: absolute;
    z-index: 10;
    border-radius: 0 0 var(--v-r-b) var(--v-r-b-xc);
    top: auto;
    left: 0;
    bottom: 0;
    height: 20px;
    width: 100%;
    background: linear-gradient(0deg, @pnMoreContentLg);
    pointer-events: none;
}

.v-status-bar,
.v-nav-history {
    position: fixed;
    border-radius: calc(var(--v-r-s) + 1px) calc(var(--v-r-s-xc) + 1px);
    background: var(--pn-c);
    padding: 1px 3px;
    right: @writePaddingRight;
    bottom: 10px;
    height: 32px;
    opacity: .6;
    z-index: 100;
}
.v-status-bar {
    font-size: .875em;
}
.v-nav-history.hover,
.v-status-bar.hover {
    opacity: 1;
}

// 移动端时微调
.v-nav-history.mobile,
.v-status-bar.mobile {
    opacity: 1;
}

// 文档导航历史
.v-nav-history {
    right: @writePaddingRight;
    bottom: 100px;
    // right: @writePaddingRight + 10px;
}

.v-status-bar>div,
.v-nav-history>div {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    border-radius: @borderRadiusInner_1px;
    padding: 0 5px;
    min-width: var(--v-tb-btn-w);
    height: 26px;
    margin: 2px 0;
}
.v-status-bar>div {
    margin-left: 2px;
}

@borderRadiusInner_1px: ~"calc(var(--v-r-s) - 1px) calc(var(--v-r-s-xc) - 1px)";
@borderRadiusInnerSi_1px: ~"calc(var(--v-r-si) - 1px) calc(var(--v-r-si-xc) - 1px)";
@borderRadiusInner_2px: ~"calc(var(--v-r-s) - 2px) calc(var(--v-r-s-xc) - 2px)";
@borderRadiusInnerSi_2px: ~"calc(var(--v-r-si) - 2px) calc(var(--v-r-si-xc) - 2px)";
.v-nav-history>div {
    border-radius: @borderRadiusInner_1px;
    display: none;
}
.v-nav-history>.v-view-history.enabled {
    display: inline-flex;
    animation: breathe-bubble .2s ease-out 2 alternate;
}

// 收起状态栏的把手
.v-status-bar-handle {
    padding: 0 !important;
    min-width: 20px !important;
    margin-left: 0 !important;
}
.v-status-bar-handle.hidden>svg {
    transform: rotate(180deg);
}

// 关闭灰色模式，恢复显示
.v-status-bar>.v-sts-gray {
    display: none;
    padding: 0 10px;
}

// 灰色模式 选中样式
.v-status-bar>div.selected {
    background: var(--ac-t1-fade);
    color: var(--ac-t1);
    font-weight: bold;
}
.v-status-bar>div.selected svg>use {
    fill: var(--a-color);
}

// 文档信息
.v-doc-info {
    font: normal 12px var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    cursor: default;
    line-height: 1.25;
}
.v-doc-info::after {
    content: "";
    width: 1px;
    background-color: var(--d-fc-a);
    position: relative;
    margin: 0 0 0 10px;
    padding: 8px 0;
}

// 演示工具信息
.v-status-bar>.v-prs-info {
    display: none;
}
.v-prs-info.selected {
    display: inline-flex;
    animation: flash 1.5s ease-out infinite alternate;
}
// 定义 flash 闪烁动画
@keyframes flash {
    0% {
        filter: brightness(.7) contrast(1);
    }
    100% {
        filter: brightness(1.2) contrast(0.7);
    }
}

.v-prs-info>label {
    border-radius: @borderRadiusInner_2px;
    padding: 0 10px;
    font-weight: bold;
    align-items: center;
    display: inline-flex;
    height: 26px;
    cursor: var(--cur-pointer);
}
.v-prs-info>label svg {
    scale: .75;
    margin-right: 2px;
}

// 鼠标悬停在状态栏图标效果
.v-status-bar>div:not([class*="-info"]).hover,
.v-nav-history>div.hover {
    background: var(--pn-c-a) !important;
}

.v-nav-history-result {
    display: none;
    width: 100%;
    height: 100%;
    padding: 60px 0 10px 0;
    overflow-y: scroll;
}

// 新版检查结果
.v-status-bar>.v-new-version {
    display: none;
}
.v-new-version.enabled {
    display: inline-flex;
}
.v-new-version.enabled::before {
    background: var(--ac-rd);
    display: block;
}

// // 文档导航/文档浏览历史
// .v-nav-history {
//     // top: 70px; // 与 ResumeReading_updateUI() 中的取值同步
//     bottom: 100px;
// }

// 链接检查结果
.v-status-bar>.v-link-chk-result {
    display: none;
}
.v-new-version::before,
.v-link-chk-result::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 5px;
    margin: 0 0 14px 22px;
    display: none;
}
.v-link-chk-result.warning {
    display: inline-flex;
}
.v-link-chk-result.warning::before {
    background: var(--ac-ye);
    display: block;
}
.v-link-chk-result:is(.error-hash, .error-address) {
    display: inline-flex;
}
.v-link-chk-result:is(.error-hash, .error-address)::before {
    background: var(--ac-rd) !important;
    display: block;
}

// 异常的链接、地址对象的样式
.v-link-error:focus {
    outline: 2px dashed var(--ac-rd-lg);
}

// 说明：table.md-grid-board 是编辑时表格行列调整面板的样式

// }
// 表格换行版式控制
@{writeOnHTML} :is(table[data-row-group], table[data-col-too-more]) {
    white-space: pre;
}

// 避免分页后重复显示表头
#write thead {
    display: contents !important;
}

// 表格列格式：加粗
.v-tbl-col-fmt-bold {
    font: var(--v-f-w-bd) 1em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
}

// 表格列格式：斜体
.v-tbl-col-fmt-em {
    font-style: italic;
}

// 下划线
#write u {
    text-decoration: none;
    border-bottom: 1px solid var(--d-fc);
}

// 表格列格式：高亮
.v-tbl-col-fmt-mark {
    background: var(--mark-bg) !important;
    font-weight: var(--v-f-w-bd);
    color: var(--d-fc) !important;
}

// 表格列格式：数值
.v-tbl-col-fmt-num {
    font-family: var(--v-f-fm-num) !important;
}
.v-tbl-col-fmt-num>span {
    font-size: 1.125em;
}
// 表格列格式：负数
.v-tbl-col-fmt-num-positive {
    color: var(--ac-rd);
}
// 表格列格式：正数
.v-tbl-col-fmt-num-negative {
    color: var(--ac-gn);
}
// 表格列格式：数值－小数部分
.v-tbl-col-fmt-num-decimal {
    font-size: .8em;
}
// 表格列格式：数值－货币
.v-tbl-col-fmt-currency {
    float: left;
    font-weight: normal;
    font-size: .8em;
    padding-top: 3px;
    padding-right: 10px;
    color: var(--d-fc-a);
}
// 表格列格式：数值－百分号
.v-tbl-col-fmt-percent {
    opacity: .6;
    font-size: .8em;
}

// 带表格带行折叠时，是目录行的样式
.v-tbl-row-g-folder {
    text-align: left !important;
    font-weight: var(--v-f-w-bd);
    min-width: 180px !important;
}

// 带表格带行折叠时，不是目录行的样式（有行自动编号）
@{writeOnHTML} h6+figure table tbody>tr>td.v-tbl-row-g-not-folder {
  text-align: left !important;
  padding-left: 50px !important;
}

// 带表格带行折叠时，不是目录行的样式（无行自动编号）
td.v-tbl-row-g-not-folder {
    text-align: left !important;
    padding-left: 25px !important;
}

// 折叠按钮样式
.v-tbl-row-g-btn {
    line-height: @miniLineHeight;
    vertical-align: middle;
}

.v-tbl-row-g-btn.hover>svg>use {
    fill: var(--a-hover-color) !important;
}
.v-tbl-row-g-btn.hover:active>svg>use {
    fill: @aActiveColor !important;
}

// 被折叠行的样式
.v-tbl-row-g-sub {
    text-align: left !important;
    padding-left: 5px !important;
}

// 缩进的占位元素样式
.v-tbl-row-g-identer {
    width: 4px;
    height: 32px;
    display: inline-block;
    padding: 0;
    margin: -10px 32px -10px 4px;
}
// 带表格行号的样式微调
@{writeOnHTML} h6+figure table .v-tbl-row-g-identer {
    margin-right: 58px;
}

// 连续缩进的占位元素进行修正
.v-tbl-row-g-identer+.v-tbl-row-g-identer {
    margin-left: -12px !important;
}
// 带表格行号的样式微调
@{writeOnHTML} h6+figure table .v-tbl-row-g-identer+.v-tbl-row-g-identer {
    margin-right: 30px !important;
}

// 缩进的单元格为目录节点
.v-tbl-row-g-identer-folder {
    margin-right: 12px;
}
// 带表格行号的样式微调
@{writeOnHTML} h6+figure table .v-tbl-row-g-identer-folder {
    margin-right: 38px !important;
}
// 连续缩进的占位元素修正
@{writeOnHTML} h6+figure table .v-tbl-row-g-identer+.v-tbl-row-g-identer-folder {
    margin-right: 10px !important;
}

// 针对 li/header 下的表格增加表格行号
#write h6+figure table {
    counter-reset: tableRowNumber - 1;
}

#write h6+figure table tbody tr {
    counter-increment: tableRowNumber;
}

// 表格表头行号
// 该过滤器更新后，须同步更新长表格折叠 tableFolding() 中对应的过滤器
#write figure table tr::before {
    content: "";
    color: var(--h-f);
    font: normal normal .8em var(--v-f-fm-num) !important; // [style] [weight] [size/[line-height]] [family]
    vertical-align: middle;
    text-align: right;
    width: 2.5em;
    position: absolute;
    padding-top: 5px;
}

// 表格折叠后强制隐藏表格行号
.v-tbl-row-num-hidden::before {
    content: "" !important;
}

// 针对 h6 下的表格行号
@tableRowNumForH6: ~"#write h6+figure table tbody tr::before";
@{tableRowNumForH6} {
    content: counter(tableRowNumber) "   ";
    white-space: pre;
    text-align: right;
    margin-top: @tableRowNumTop;
    color: var(--h-f);
}
@{writeOnHTML} @{tableRowNumForH6} {
    margin-top: @tableRowNumTop * 2;
}

// 应显示表格行的表格的首列
#write h6+figure table tr>:is(th, td):first-child {
    padding-left: 30px;
}

// 表格阅读模式（十字光标）
.v-tbl-x {
    top: 0;
    width: 100px;
    height: 100px;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
.v-tbl-x-cell {
    outline: 4px solid var(--d-fc-a) !important;
    border-color: transparent !important;
    border-radius: var(--v-r-s);
}
.v-tbl-x.left-up {
    background: linear-gradient(315deg, transparent, var(--ac-t1-fade) 20px, fade(@aColor, 1%));
    border-bottom-right-radius: var(--v-r-s);
}
.v-tbl-x.right-up {
    background: linear-gradient(45deg, transparent, var(--ac-t1-fade) 20px, fade(@aColor, 1%));
    border-bottom-left-radius: var(--v-r-s);
}
.v-tbl-x.left-down {
    background: linear-gradient(210deg, transparent, var(--ac-t1-fade) 20px, fade(@aColor, 1%));
    border-top-right-radius: var(--v-r-s);
}
.v-tbl-x.right-down {
    background: linear-gradient(135deg, transparent, var(--ac-t1-fade) 20px, fade(@aColor, 1%));
    border-top-left-radius: var(--v-r-s);
}

@{writeOnHTML} table.wrap {
    white-space: pre-wrap !important;
}
@{writeOnHTML} table.unwrap {
    white-space: pre !important;
}

// 单元格内容超长后强制控制宽度
td.v-long {
    min-width: 330px !important;
    max-width: 330px !important;
    white-space: pre-wrap !important;
}

// 高亮
mark {
    box-shadow: 0 -@markBgHeight 0 0 var(--mark-bg) inset;
    // font-weight: var(--v-f-w-bd);
    // font-weight: normal;
    color: inherit;
    // background: rgba(0, 0, 0, .01) !important; // 不用 trasparent 避免进行内联样式转换时被过滤
    background: transparent; // 不用 trasparent 避免进行内联样式转换时被过滤
}

#write del {
    text-decoration-color: var(--d-fc) !important;
}

@{writeOnEditing} :is(h1,h2,h3,h4,h5,h6) > span > del::after,
@{writeOnEditing} @{quoteTitle} span > del::after {
    content: "× Unpublished / 不出版";
    text-transform: uppercase;
    position: absolute;
    font: @syntaxTipsFont;
    color: var(--d-fc);
    padding-left: 5px;
    text-decoration: none !important;
    opacity: .6;
}

#write del code {
    text-decoration: line-through !important;
    text-decoration-color: var(--d-fc) !important;
}

.footnotes {
    opacity: .6;
}

// 脚注区域
.footnotes-area {
    margin-top: 100px;
    color: var(--d-fc);
}

// 文档末尾的脚注行
.footnote-line {
    font-size: 1em;
    margin-top: .5em;
    padding-bottom: .5em;
}

// 弹层中的脚注行
.v-footnote-pn-content>.footnote-line {
    padding-bottom: 50px;
}

// 脚注行序末返回链接
.reversefootnote {
    color: @accColorBlue;
}

.reversefootnote:hover {
    color: @accColorRed;
}

// 脚注上标
#write a[name^="ref-footnote-"] {
    font: normal .75em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
    color: @accColorBlue;
}

@codeBorderRadius: var(--v-r-s) var(--v-r-s-xc);
@{inline_script}, // 行内公式
@{tagOnEditing},
tt,
code {
    font: var(--v-f-w-text) @codeFontSize/@defaultLineHeight var(--v-f-fm-code); // [style] [weight] [size/[line-height]] [family]
    color: var(--code-t);
    background: var(--code-bg);
    border-radius: @codeBorderRadius;
    padding: 3px @codePaddingLeft;
    line-height: 1;
    margin: 0;
    border: 1px solid var(--std-code-shadow);
    display: inline-block;
    word-break: break-all;
    text-align: inherit;
}
.v-std-code.hover {
    filter: brightness(@hoverBrightness);
}

strong :is(tt, code) {
    font-weight: var(--v-f-w-bd);
}

.md-tag {
    color: inherit;
}


/**************************************
* 数学公式
**************************************/

@codeTooltipBg: var(--d-fc);
@codeTooltipText: var(--d-bc);
mjx-container>svg svg[data-labels] g,
.code-tooltip mjx-container>svg svg[data-labels] g {
    fill: var(--d-fc-a) !important;
}

// 编辑时，行内数学公式
// 针对 macOS
body.html-for-mac @{writeOnEditing} .md-inline-math mjx-container {
    font-size: .66em !important;
}

// 预览：公式、脚注
.code-tooltip,
@{writeOnEditing} .md-fences-math[lang="math"].md-focus .md-fences-adv-panel,
.md-hover-tip .code-tooltip-content {
    background: @codeTooltipBg !important;
    color: @codeTooltipText !important;
    border-radius: var(--v-r-b) !important;
}
.code-tooltip {
    border-radius: var(--v-r-b) var(--v-r-b-xc) !important;
    padding: 2px 5px !important;
    margin-right: @writePaddingRight;
}
@{writeOnEditing} .md-fences-math[lang="math"].md-focus .md-fences-adv-panel,
@{writeOnEditing} .md-fences .code-tooltip { // 代码块内的语言
    border-radius: calc(var(--v-r-s) - 2px) calc(var(--v-r-s) - 2px) 0 0 !important;
    bottom: 0;
}

// 公式内容
.code-tooltip mjx-container>svg g,
@{writeOnEditing} .md-fences-math[lang="math"].md-focus .md-fences-adv-panel mjx-container>svg g {
    fill: @codeTooltipText !important;
}
.typora-export mjx-container[jax="SVG"] {
    margin: 0 !important;
}
// 公式内的链接
mjx-container[jax="SVG"] > svg a {
    fill: var(--a-color) !important;
    stroke: var(--a-color) !important;
}
mjx-container[jax="SVG"] > svg a:hover {
    fill: var(--a-hover-color) !important;
    stroke: var(--a-hover-color) !important;
}

// 浮层箭头
.md-hover-tip .md-arrow:after {
    background: @codeTooltipBg;
}

// 行间公式、HTML 代码的右上角标签
@{writeOnEditing} .md-rawblock .md-rawblock-tooltip {
    border-radius: var(--v-r-s) var(--v-r-s) 0 0;
}
// 行间公式容器
@{writeOnEditing} .md-fences-math[lang="math"] .md-diagram-panel-preview { // ```math 公式语法
    font-size: 1.25em !important;
}
.md-math-container { // 标准公式语法
    border-radius: var(--v-r-b) 0 var(--v-r-b) var(--v-r-b-xc);
    font-size: 1.25em !important;
}

.md-diagram-panel-preview {
    padding-top: 0;
}

// 行间公式区（```math 语法）
#write .md-fences:not([class*="md-diagram"]), // 排除 ```mermaid
.md-math-block { // $$ 语法
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    border: @captionContentBorder;
    background-color: var(--d-bc);
}
// 针对导出后（write 与 vlook 的范围）
.typora-export :is(.md-math-block, .md-fences-math) {
    margin: 0 !important;
    padding: 1rem !important;
    width: auto !important;
}
.typora-export :is(.md-math-block, .md-fences-math) mjx-assistive-mml {
    display: none !important;
}

// 针对 HTML 代码块
@{writeOnEditing} .md-htmlblock {
    margin-top: 0;
}
@{writeOnEditing} .md-htmlblock-container {
    border-radius: var(--v-r-b) 0 var(--v-r-b) var(--v-r-b-xc) !important;
}

// 针对 HTML 代码块外框
@{writeOnEditing} .md-htmlblock-panel,
@{writeOnEditing} .md-htmlblock-panel .md-rawblock-control:not(.md-rawblock-tooltip) {
    border-radius: var(--v-r-b) 0 var(--v-r-b) var(--v-r-b-xc);
}
// 针对 HTML 代码块内框
@{writeOnEditing} .md-htmlblock-panel .md-rawblock-control:not(.md-rawblock-tooltip) .CodeMirror.cm-s-inner:not([lang="math"]) {
    border-radius: calc(var(--v-r-b) - 4px) 0 calc(var(--v-r-b) - 4px) calc(var(--v-r-b-xc) - 4px);
}
// 针对 HTML 代码块内输入框
@{writeOnEditing} .md-htmlblock-panel .md-rawblock-input {
    padding: 4px;
}

// 公式编辑组件
@{writeOnEditing} .md-mathblock-panel .md-rawblock-before {
    border-radius: var(--v-r-b) 0 0 0 !important;
}
@{writeOnEditing} .md-mathblock-panel .md-rawblock-control:not(.md-rawblock-tooltip) {
    border-radius: 0;
}
@{writeOnEditing} .md-mathblock-panel .CodeMirror-scroll {
    border-radius: 0;
}
@{writeOnEditing} .md-mathblock-panel .md-rawblock-after {
    border-radius: 0 0 var(--v-r-b) var(--v-r-b-xc) !important;
}

.md-math-block.md-focus .CodeMirror-sizer {
    box-shadow: var(--v-input-focus-inn-shadow);
}

// 行内公式（编辑时）
@inline_script: ~".md-expand .md-inline-math-container>script";
@{inline_script} {
    box-shadow: var(--v-input-focus-inn-shadow), var(--v-input-focus-shadow);
}

/**************************************
* Header Counters in Content 内容中的目录序号样式
**************************************/

#write {
    counter-reset: h1;
}

#write h1 {
    counter-reset: h2;
}

#write h2 {
    counter-reset: h3;
}

#write h3 {
    counter-reset: h4;
}

#write h4 {
    counter-reset: h5;
}

#write h5 {
    counter-reset: h6;
}

#write :is(h1,h2,h3,h4,h5,h6)::before,
#write :is(h1,h2,h3,h4,h5,h6)::after {
    color: @contentHeaderNumColor;
    opacity: @contentHeaderNumOpacity;
    letter-spacing: 0;
    -webkit-text-stroke: initial;
    text-stroke: initial;
    text-shadow: none;
}

@escBackcoverId: ~"h1:not(:last-child)";
#write h1::before,
@{coverAfterYAML}~@{escBackcoverId}::before, // 有 YAML 的封面情况下排除 h1(封底) 情况
@{coverWithoutYAML}~@{escBackcoverId}::before {  // 无 YAML 的封面情况下排除 h1(封底) 情况
    counter-increment: h1;
    content: @h1BeforeContent @h1NumSeparator;
    .genH1beforeExt();
}
@{backcoverAfterYAML}::before { // 对封底的微调
    content: "";
}

#write h2::before {
    counter-increment: h2;
    content: @h2BeforeContent @h2NumSeparator;
    .genH2beforeExt();
}

#write h3::before {
    counter-increment: h3;
    content: @h3BeforeContent @h3NumSeparator;
    .genH3beforeExt();
}

#write h4::before {
    counter-increment: h4;
    content: @h4BeforeContent @h4NumSeparator;
    .genH4beforeExt();
}

#write h5::before {
    counter-increment: h5;
    content: @h5BeforeContent @h5NumSeparator;
    .genH5beforeExt();
}

#write h6::before {
    content: @h6BeforeContent @h6NumSeparator;
    .genH6beforeExt();
}

// 导出 HTML 后的文档章节目录的自动编码内容
@{writeOnHTML} :is(h1,h2,h3,h4,h5)::before {
    opacity: @contentHeaderNumOpacity !important;
}
@{writeOnHTML} h1::before {
    content: attr(data-header-num) @h1NumSeparator !important;
}
@{writeOnHTML} h2::before {
    content: attr(data-header-num) @h2NumSeparator !important;
}
@{writeOnHTML} h3::before {
    content: attr(data-header-num) @h3NumSeparator !important;
}
@{writeOnHTML} h4::before {
    content: attr(data-header-num) @h4NumSeparator !important;
}
@{writeOnHTML} h5::before {
    content: attr(data-header-num) @h5NumSeparator !important;
}

@kbdShadowWidth: 1px;
.v-tool-tips kbd,
.v-info-tips kbd,
.v-prs-info kbd,
#write kbd {
    font: var(--v-f-w-bd) .875em var(--v-f-fm-key); // [style] [weight] [size/[line-height]] [family]
    border-radius: var(--v-r-s-small);
    margin: @kbdShadowWidth;
    padding: 1px 4px;
    line-height: 1;
    display: inline;
    color: var(--d-bc);
    border: 2px solid var(--kbd-shadow);
    border-left-color: var(--kbd-reflect);
    border-top-color: var(--kbd-reflect);
    background: var(--kbd-bg);
    box-shadow: none;
    // 输入光标颜色
    caret-color: var(--d-bc);
}

/**************************************
* VLOOK UI 自定义样式
**************************************/

// 聚光灯模式
.v-spotlight {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    pointer-events: none;
    z-index: 3500;
}

// 在 Dark 模式时对文档内容的微调处理
.v-spotlight-in-dark {
    filter: brightness(1.2);
}

// 激光笔鼠标形状
.v-cursor-laser {
    cursor: var(--cur-laser) !important;
}

// 过渡效果样式集
.v-transition-all {
    transition: all var(--v-trans-dur) ease-out;
}
.v-transition-box-shadow {
    transition: box-shadow var(--v-trans-dur) ease-out;
}
.v-transition-opacity {
    transition: opacity var(--v-trans-dur) ease-out;
}
.v-transition-left {
    transition: left var(--v-trans-dur) ease-out;
}
.v-transition-height {
    transition: height var(--v-trans-dur) ease-out;
}
.v-transition-background {
    transition: background var(--v-trans-dur) ease-out;
}

.v-tool-tips,
.v-info-tips {
    display: none;
    position: fixed;
    margin-left: auto;
    padding: 10px;
    text-align: center;
    white-space: pre-wrap;
    border: 1px solid var(--d-fc-a);
    border-radius: 0 var(--v-r-b) var(--v-r-b) var(--v-r-b);
    font: normal 1em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    background: var(--pn-c);
    cursor: default;
    z-index: 4000;
}
.v-info-tips:is(.error-hash, .error-address) {
    color: #FFFFFF;
    border-color: var(--ac-rd-lg);
    background: var(--ac-rd-lg);
    padding: 5px 10px;
}
.v-info-tips.bubble {
    color: var(--d-bc);
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    border-color: var(--d-fc-a);
    border: none;
    background: var(--d-fc);
    padding: 10px;
    animation: breathe-bubble .2s ease-out 2 alternate;
}
.v-info-tips.bubble svg>use {
    fill: var(--d-bc);
}

@keyframes breathe-bubble {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

// 针对提示信息、演示工具提示信息内的按键样式
.v-prs-info kbd,
.v-info-tips.bubble kbd {
    margin: 0 4px;
    padding: 1px 4px;
    text-shadow: none;
    color: var(--d-fc);
    border: 2px solid var(--kbd-shadow-i);
    border-left-color: var(--kbd-reflect-i);
    border-top-color: var(--kbd-reflect-i);
    background: var(--kbd-bg-i);
    box-shadow: none;
}
.v-info-tips.bubble hr {
    margin-top: .75em;
    margin-bottom: .75em;
    border: 1px solid var(--d-fc-a);
    overflow: hidden;
    box-sizing: content-box;
    border-top: 0;
    opacity: .6;
}
.v-info-tips.bubble sub {
    display: inline-flex;
}

.v-tool-tips {
    visibility: hidden;
    opacity: 0;
    display: block;
    box-shadow: var(--v-fl-sd), @contrastBorder;
    text-align: left;
    white-space: pre;
    font-size: .875em;
    max-width: 30%;
    white-space: pre-wrap;
}
// 提示对象在上半屏
.v-tool-tips.top.center {
    border-radius: var(--v-r-b);
}
.v-tool-tips.top.right {
    border-radius: var(--v-r-b) 0 var(--v-r-b) var(--v-r-b);
}
// 提示对象在下半屏
.v-tool-tips.bottom {
    border-radius:var(--v-r-b) var(--v-r-b) var(--v-r-b) 0;
}
.v-tool-tips.bottom.center {
    border-radius: var(--v-r-b);
}
.v-tool-tips.bottom.right {
    border-radius:var(--v-r-b) var(--v-r-b) 0 var(--v-r-b);
}

:is(.v-tool-tips, .v-info-tips) a {
    font-weight: var(--v-f-w-bd);
    text-decoration: none;
}

// 字体风格选择器
.v-font-style {
    display: none;
    position: fixed;
    padding: 10px;
    text-align: center;
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    border: 1px solid var(--d-fc-a);
    font: normal 1em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    background: var(--pn-c);
    z-index: 4000;
}
@fontStyleOptWidth: 140px;
@fontStyleOptHeight: 208px;
.v-font-style>.v-font-style-opt {
    vertical-align: top;
    display: inline-block;
    margin: 0 0 30px 10px;
    width: @fontStyleOptWidth;
    height: @fontStyleOptHeight;
}
.v-font-style>.v-font-style-opt:first-of-type {
    margin-left: 0;
}
// 恢复主题配套的字体风格
.v-font-style-restore {
    color: var(--a-hover-color);
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px;
    border-radius: var(--v-r-s) var(--v-r-s-xc);
    width: fit-content;
    margin: 0 auto 10px;
    display: none;
    cursor: var(--cur-pointer);
}
.v-font-style-restore:hover {
    background-color: var(--pn-c-a);
}
.v-font-style-restore:active {
    color: var(--d-bc) !important;
    background: var(--d-fc-a);
}

// 字体风格选择器字体包下载提示
.v-font-style-download {
    font-size: .75em;
    width: 800px;
    margin: auto;
    overflow: auto;
    border-radius: var(--v-r-s) var(--v-r-s-xc);
}
// 当前字体风格下载提示
.v-font-style-current {
    font: normal .75em sans-serif; // [style] [weight] [size/[line-height]] [family]
    background: var(--pn-c);
    border-radius: calc(var(--v-r-s) + 1px) var(--v-r-s-xc);
    left: @writePaddingRight;
    bottom: 10px;
    // right: @writePaddingRight;
    // bottom: 50px;
    padding: 0 10px;
    height: 26px;
    justify-content: center;
    align-items: center;
    display: none;
    position: fixed;
    opacity: 1;
    cursor: default;
    z-index: 6100;
}
.v-font-style-current.done {
    animation: hide-by-css var(--v-trans-dur) forwards;
    animation-delay: 3s; // 指定时间后再启用
}
@keyframes show-by-css {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        display: inline-flex;
    }
}
@keyframes hide-by-css {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        display: none;
    }
}

// 字体风格选项
.v-font-style-opt>img {
    border-radius: var(--v-r-s) var(--v-r-s-xc) !important;
    filter: opacity(.6);
    background-color: var(--d-fc);
    color: var(--d-bc);
    min-width: @fontStyleOptWidth;
    min-height: @fontStyleOptHeight;
    // min-height: 200px;
}

// 字体风格选项鼠标事件效果
.v-font-style-opt>img:hover {
    filter: opacity(1);
    box-shadow: 0 0 0 2px var(--a-color);
}
.v-font-style-opt>img:active {
    box-shadow: 0 0 0 2px @aActiveColor;
}

// 显示当前选择字体风格的加载进度信息
.v-font-style-opt>.selected + div {
    visibility: visible;
}

// 当前选择的字体风格选项
.v-font-style-opt>img.selected {
    box-shadow: 0 0 0 4px var(--h-f) !important;
    filter: opacity(1) !important;
}

// 字体包信息
div[class*="v-fontinfo-"] {
    margin-top: 10px;
    text-align: left;
    font-size: .875em;
    visibility: hidden; // 默认隐藏，选中后才显示
}
// 字体包加载状态
div[class*="v-fontinfo-"] > span,
.v-font-style-current > span {
    color: var(--d-fc-a);
}
// 加载完成
div[class*="v-fontinfo-"].done > span,
.v-font-style-current.done > span {
    color: var(--ac-gn);
    font-weight: bold;
}

// 针对 Light Mode 的文档图标（标签栏、收藏夹图标）
// 欢迎页加载时的 logo
.v-doc-logo-light {
    margin-top: 100px;
    width: 100%;
    height: 80px;
    background-image: var(--thm-fav-logo-lg);
    background-size: 80px 80px;
    background-repeat: no-repeat;
    background-position: top center;
}

// 检查锚点
.v-check-hash {
    position: fixed;
    display: none;
    font: var(--v-f-w-text) @fontSize/@paragraphInnerLineHeight var(--v-f-fm-text); // [style] [weight] [size/[line-height]] [family]
    color: var(--ac-rd);
    background-color: var(--d-bc);
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    z-index: 6500;
}
.v-check-hash.all-found {
    border: 10px solid var(--ac-gn-fade);
}
.v-check-hash.not-found {
    border: 10px solid var(--ac-rd-fade);
}
.v-check-hash > .item {
    font-size: 1.5em;
    padding: 10px;
}
.v-check-hash>.all-found {
    color: var(--ac-gn);
    font-weight: bold;
    font-size: 2em;
    text-align: center;
    margin: 20px 10px;
}
.v-check-hash label {
    color: var(--d-fc-a);
    font-weight: bold;
}
.v-check-hash-close,
.v-check-hash-recheck {
    width: fit-content;
    margin: 1em auto;
    color: var(--d-fc);
    background: var(--pn-c);
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    cursor: var(--cur-pointer);
    padding: 8px 20px;
}
.v-check-hash.all-found :is(.v-check-hash-close, .v-check-hash-recheck) {
    color: #FFFFFF;
    background: var(--ac-gn);
}
.v-check-hash.not-found :is(.v-check-hash-close, .v-check-hash-recheck) {
    color: #FFFFFF;
    background: var(--ac-rd);
}
.v-check-hash-recheck {
    font-weight: bold;
}
.v-check-hash-close.hover,
.v-check-hash-recheck.hover {
    background: var(--a-hover-color);
    color: @buttonForeHoverColor;
}
.v-check-hash-close:active,
.v-check-hash-recheck:active {
    background: @aActiveColor;
}

.v-welcome-page {
    cursor: wait;
    position: fixed;
    color: @welcomePageForeColor;
    background: @welcomePageBgColor;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: auto;
    visibility: hidden;
    opacity: 0;
    z-index: 6000;
}

// 按钮呼吸动画
@keyframes breathe-button {
    0% {
        opacity: 1;
        transform: scale(1.1);
        filter: brightness(1.2);
    }
    100% {
        opacity: .8;
        transform: scale(1);
        filter: brightness(1);
    }
}

.genCC() when (isdefined(@vlookCC)) {
    :root {
        --v-vlook-cc: true; // 对应的插件变量 gVlookCC
    }

    .v-cc {
        font: var(--v-f-w-bd) .875em/1 var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
        width: auto;
        height: auto;
        display: none;
        flex-direction: column;
        position: absolute;
        z-index: 1;
    }
    // 自定义扩展样式（含选择器）
    .genCcExt();

    @ccPadding: var(--thm-cc-left-right-pd);
    @ccTopPadding: 60px;
    .v-cc.left {
        text-align: left;
        align-items: flex-start;
    }
    .v-cc.right {
        right: @ccPadding;
        text-align: right;
        align-items: flex-end;
    }
    .v-cc.bottom>div {
        align-items: end;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .v-cc.top {
        top: @ccTopPadding;
    }
    .v-cc.top.left {
        left: @ccPadding;
        .genCcTopLeftExt();
    }
    .v-cc.top.right {
        right: @ccPadding;
        .genCcTopRightExt();
    }
    .v-cc.bottom.left {
        top: 600px;
        left: @ccPadding;
        .genCcBottomLeftExt();
    }
    .v-cc.bottom.right {
        top: 600px;
        .genCcBottomRightExt();
    }
}
.genCC();

// 欢迎屏提示内容
.v-tips {
    font: var(--v-f-w-title) 1.75em var(--v-f-fm-title); // [style] [weight] [size/[line-height]] [family]
    padding: 20px 20px 10px 20px;
}
.v-tips>div {
    text-align: center;
    line-height: @miniLineHeight;
    margin-bottom: 50px;
}
// 欢迎屏中的「作者」
.v-tips>strong {
    font-weight: normal !important;
    font-size: .875em;
    margin-bottom: 20px;
}
.v-tips>strong::before {
    .genCoverStrongBefore();
    margin-bottom: .375em;
}

.v-loading {
    cursor: not-allowed;
    padding: 8px 20px;
    border: 1px solid @buttonForeColor;
    font: italic normal 1.25em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    display: inline-block;
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    margin-bottom: 2em;
    opacity: .6;
}

.v-btn-done {
    cursor: var(--cur-pointer) !important;
    border: 2px solid @buttonForeHoverColor;
    font-style: normal;
    font-weight: var(--v-f-w-title);
    font-size: 1.25em;
    color: @buttonForeHoverColor;
    background: var(--a-hover-color);
    opacity: 1;
    animation: breathe-button 1s ease 1 alternate;
}
.v-btn-done:hover {
    color: var(--a-hover-color);
    background: @buttonForeHoverColor;
    box-shadow: var(--v-fl-sd);
}
.v-btn-done:active {
    border: none;
    color: @buttonForeHoverColor;
    background: desaturate(@aColor, 50%);
    box-shadow: 0 0 0 2px fade(@aColor, 50%);
    transform: none;
}

.v-btn-done.wait {
    animation: breathe-button 1s 10 alternate;
}

.v-btn-done>span {
    font-weight: normal;
}

// 修正在 SVG 顺序图的下边界与 actor 无间隔问题
:is(.md-diagram-panel, .v-fig-content) svg[viewBox^="-"]{
    padding-bottom: @scrollFix;
}

.v-fig-content svg:not([data-inject-url]) { // 跳过由 SVGInject 生成的 svg
    width: 100%;
}

// 继续上次的阅读
.v-resume-reading {
    top: 70px; // 与 ResumeReading_updateUI() 中的取值同步
    // right: @writePaddingRight + 10px; // 与 ResumeReading_updateUI() 中的取值同步
    right: @writePaddingRight; // 与 ResumeReading_updateUI() 中的取值同步
    padding: 5px 5px 5px 10px !important;
    background-color: var(--pn-c);
    color: var(--d-fc);
    font-size: .875em;
    display: none;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    z-index: 100;
    cursor: var(--cur-pointer);
}

.v-nav-center {
    background: var(--pn-c);
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    cursor: default;
    display: block;
    left: calc(var(--v-nav-center-w) * -2);
    top: 10px;
    bottom: 40px;
    width: var(--v-nav-center-w);
    padding: 0;
    position: fixed;
    z-index: 2000;
    user-select: none;
}

.v-nav-center-float {
    top: @floatTopBottom;
    bottom: @floatTopBottom;
    box-shadow: var(--v-fl-sd);
}

// 生成浮动 UI 的标题样式（如：、等）
.v-font-style::before, // 字体风格
.v-nav-center-float::before, // 导航中心
.v-doc-lib::after, // 文库视图
.v-footnote-pn::before, // 脚注
.v-link-info-list::before { // 链接地图、异常链接
    content: attr(data-title);
    text-transform: uppercase;
    color: @buttonForeColor;
    // font-size: 1.25em;
    // font-weight: bold;
    font: bold 1.25em var(--v-f-fm-h);
    position: absolute;
    left: 0;
    top: -40px;
    width: 100%;
    text-align: center;
    padding: 0 5px;
    white-space: pre;
    pointer-events: none;
}
.v-doc-lib::after,
.v-footnote-pn::before {
    top: -80px;
}
.v-doc-lib::after {
    top: unset;
    bottom: -40px;
}

.v-nav-center-block {
    top: 70px;
    bottom: 10px;
    box-shadow: var(--v-fl-sd), var(--v-fl-i-sd);
}

// ----------------------------------------
// 生成柔和自然的透明渐变色
// 具体数值调整，须通过 src/calc-ref.xlx 进行计算生成

// 面板内的内容平滑渐变阴影样式
// （在 Chrome 131 版本中出现渐变色超过 7 种时会发白，临时调整为不量的渐变色）
// 导航中心：顶部
@navMoreContentLgHeader: ~"rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 1) 83%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.8) 86.4%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.55) 90.48%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.45) 92.52%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.2) 96.6%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0) 100%";
// 导航中心：底部
@navMoreContentLgFooter: ~"rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 1) 0%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.8) 20%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.55) 44%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.45) 56%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.2) 80%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0) 100%";
// 脚注：底部
@footnoteMoreContentLgFooter: ~"rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 1) 57%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.8) 65.6%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.55) 75.92%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.45) 81.08%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.2) 91.4%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0) 100%";
// 链接列表-顶/底部，脚注顶部
@pnMoreContentLg: ~"rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 1) 25%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.8) 40%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.55) 58%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.45) 67%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.2) 85%, rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0) 100%";
// 文档更多内容使用
@docMoreContentLg: ~"rgba(var(--fade-r), var(--fade-g), var(--fade-b), 1) 0%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.8) 20%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.55) 44%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.45) 56%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0.2) 80%, rgba(var(--fade-r), var(--fade-g), var(--fade-b), 0) 100%";

// ----------------------------------------

// 导航中心头部
.v-nav-center-header {
    color: var(--d-fc);
    font: normal 1em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    height: 106px;
    padding: 0;
    background: linear-gradient(180deg, @navMoreContentLgHeader);
    position: absolute;
    left: 1px;
    top: 1px;
    right: 1px;
    border-top-right-radius: var(--v-r-b);
    border-top-left-radius: var(--v-r-b);
    z-index: 10;
    pointer-events: none;
}

// 导航中心正文区
.v-nav-center-body {
    width: 100%;
    height: 100%;
    padding: 70px 1px 5px 1px;
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    overflow: auto;
    overflow-y: hidden;
}

// 导航中心尾部
.v-nav-center-footer {
    width: calc(100% - 2px);
    height: 20px;
    line-height: 40px;
    text-align: center;
    bottom: 0;
    margin: 1px;
    padding: 0;
    background: linear-gradient(0deg, @navMoreContentLgFooter);
    border-bottom-right-radius: var(--v-r-b);
    border-bottom-left-radius: var(--v-r-b-xc);
    position: absolute;
    z-index: 10;
    pointer-events: none;
}

// 导航中心标签栏
.v-segment {
    text-align: center;
    height: calc(var(--v-seg-h) + 4px);
    border-radius: var(--v-r-s) var(--v-r-s-xc);
    margin: 10px;
    padding: 2px;
    background: var(--pn-c-a);
    pointer-events: all;
}
// 导航中心标签栏按钮
.v-segment>input[name="toc-segment"] {
    display: none;
}
// 当前按钮
.v-segment>input[name="toc-segment"]:checked+.v-segment-btn {
    background: @buttonBgColor;
}
.v-segment>input[name="toc-segment"]:checked+.v-segment-btn>svg>use {
    fill: @buttonForeColor;
}

.v-segment>input[name="toc-segment"][data-result="none"]+label {
    opacity: .25;
    cursor: not-allowed;
}

.v-segment-btn {
    width: 16%;
    height: var(--v-seg-h);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    border-radius: @borderRadiusInner_2px;
    float: left;
    position: relative;
    z-index: 10;
}
.v-segment-btn.hover {
    background: var(--a-hover-color) !important;
}
.v-segment-btn.hover>svg>use {
    fill: @buttonForeHoverColor !important;
}
.v-segment-btn:active {
    background: @aActiveColor;
    box-shadow: @activeBoxShadow !important;
    transition: none;
}
.v-segment-btn:active>svg>use {
    fill: @buttonForeHoverColor;
}
// 大纲索引 tab
.v-segment-btn.toc {
    margin: 0 .8% 0 0;
}
// 插图索引 tab
.v-segment-btn.figure {
    margin: 0 .8% 0 0;
}
// 表格索引 tab
.v-segment-btn.table {
    margin: 0 .8% 0 0;
}
// 代码块索引 tab
.v-segment-btn.codeblock {
    margin: 0 .8% 0 0;
}
// 公式索引 tab
.v-segment-btn.formula {
    margin: 0 .8% 0 0;
}
// 多媒体索引 tab
.v-segment-btn.media {
    margin: 0;
}

.v-toc-body {
    width: 100%;
    height: 100%;
    padding: 10px 0 0 0;
    overflow-y: scroll;
}
.v-toc-body::after {
    content: attr(data-toc-empty);
    white-space: pre-wrap;
    padding: 0 20px;
    color: var(--d-fc-a);
    position: absolute;
    text-align: center;
    top: 150px;
    width: 100%;
}
.v-toc-body:not(:empty)::after {
    content: "";
}

// 鼠标 hover 后展开导航中心的引导把手
@ncHandleLeft: 8px;
.v-nav-center-handle {
    position: fixed;
    display: none;
    top: 390px;
    left: @ncHandleLeft;
    width: 4px;
    height: 80px;
    border-radius: 2px;
    z-index: 2000;
    // 以下两行样式及 hover 样式，与 v-fill-width 内的 svg>use 保持一致
    background: var(--d-fc);
    opacity: .25;
}
.v-nav-center-handle.hover {
    background: var(--a-hover-color);
    opacity: 1;
}
// 乒乓动画效果
.v-nav-center-handle.enabled {
    animation: handle-ping-pong 1s ease-out 1;
}
@keyframes handle-ping-pong {
    0% {
        left: @ncHandleLeft + 40px; // +5x
        opacity: 1;
    }
    20% {
        left: 0;
        opacity: .5;
    }
    40% {
        left: @ncHandleLeft + 24px; // +3x
        opacity: .75;
    }
    60% {
        left: calc(@ncHandleLeft / 2);
        opacity: .5;
    }
    80% {
        left: @ncHandleLeft + 8px; // +1x
        opacity: .5;
    }
    100% {
        left: @ncHandleLeft;
        opacity: .25;
    }
}

.v-copyright-svg-ico {
    display: inline-block;
    vertical-align: middle;
}
.v-copyright {
    left: 0;
    bottom: 5px;
    text-align: center;
    width: 100%;
    padding: 5px 10px;
    font: normal .875em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    position: absolute;
    color: @buttonForeColor !important;
    border: none;
    opacity: .6;
}
.v-copyright:hover {
    opacity: 1;
}
.v-copyright a {
    color: @buttonForeColor !important;
    border-bottom: @aBorderWidth solid @buttonForeColor;
    text-shadow: none;
    text-decoration: none;
}
.v-copyright a:hover {
    box-shadow: 0 -.3em 0 0 rgba(255, 255, 255, .3) inset;
}

.v-float-card {
    box-shadow: var(--v-fl-sd), @contrastBorder;
}
.v-float-card2 {
    box-shadow: var(--v-fl-sd), var(--v-fl-i-sd);
}

.v-footnote-pn {
    position: fixed;
    left: 15%;
    right: 15%;
    bottom: @floatTopBottom * 2;
    height: 200px;
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    box-shadow: var(--v-fl-sd);
    margin: 0;
    padding: 5px 0;
    background: var(--pn-c);
    display: none;
    z-index: 2100;
}

.v-footnote-pn-header {
    position: absolute;
    z-index: 10;
    height: 20px;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, @pnMoreContentLg);
    border-radius: var(--v-r-b) var(--v-r-b-xc) 0 0;
}

.v-footnote-pn-content {
    width: 100%;
    top: 2px;
    bottom: 2px;
    padding: 10px 20px;
    position: absolute;
    overflow-x: auto;
}

@footnoteFooterHeight: 70px;
.v-footnote-pn-footer {
    text-transform: uppercase;
    font-weight: var(--v-f-w-bd);
    height: @footnoteFooterHeight;
    left: 0;
    right: 0;
    line-height: @footnoteFooterHeight + 10px;
    bottom: 0;
    padding: 5px 20px;
    margin: 0;
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    background: linear-gradient(0deg, @footnoteMoreContentLgFooter);
    position: absolute;
}

#vk-footer-area {
    visibility: hidden !important;
}

// --------------------
// 文档更多内容

// 更多内容的高度，该数据的调整后，须通过 src/calc-ref.xlx 进行计算重新生成 @docMoreContent 的值
@moreContentHeight: 50px;
// 顶部的样式（不是在封面时）
.v-more-doc-content-before {
    width: 100%;
    position: fixed;
    top: 0;
    margin: 0 auto;
    pointer-events: none;
    display: none;
    z-index: 60;
    height: @moreContentHeight;
}
// 底部的样式
.v-more-doc-content-after {
    width: 100%;
    height: @moreContentHeight;
    position: fixed;
    bottom: 0;
    margin: 0 auto;
    pointer-events: none;
    display: block;
    z-index: 69;
}
// 生成文档更多内容遮挡效果
.genMoreDocContentShadow() {
    .v-more-doc-content-before {
        background: linear-gradient(180deg, @docMoreContentLg);
    }
    .v-more-doc-content-after {
        background: linear-gradient(0deg, @docMoreContentLg);
    }
}
// 生成文档更多内容遮挡效果
.genMoreDocContentShadow();

.v-toolbar {
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    left: @writePaddingRight;
    top: 10px;
    padding: 10px;
    width: var(--v-nav-center-w);
    height: 50px;
    position: fixed;
    background: @buttonBgColor;
    display: none;
    z-index: 100;
    pointer-events: none;
}
.v-toolbar.cover {
    width: auto;
    right: @writePaddingRight;
    background: none;
}

.v-toolbar-spliter {
    display: flex;
    width: 40px;
    height: 30px;
    padding: 0;
    float: right;
}

.v-toolbar-smallscreen {
    top: 50px;
    padding-left: 0;
    padding-right: 0;
}

// 用于替代默认的样式，但不设置 ::before
.v-map-item,
.v-toc-item,
.md-toc-item {
    color: var(--d-fc) !important;
    font: normal 1em/@defaultLineHeight var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    margin: 0 10px 2px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 5px;
    border-radius: var(--v-r-s) var(--v-r-s-xc);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: @miniLineHeight !important;
}
.v-map-item,
.v-toc-item {
    white-space: normal;
    line-height: @miniLineHeight;
    padding: 10px;
    margin: 10px 10px 0;
    display: block;
}
.md-toc-item::before {
    color: var(--toc-h-num-color);
    padding-left: 5px;
}
.md-toc-item.hover::before {
    color: var(--d-fc);
}
.v-toc-item.hover,
.md-toc-item.hover {
    background: var(--pn-c-a);
}
.v-toc-item:active,
.md-toc-item:active,
.v-doc-lib-item:active {
    color: var(--d-bc) !important;
    background: var(--d-fc-a) !important;
    transition: none;
}
.v-toc-item:active::before,
.md-toc-item:active::before {
    color: var(--d-bc);
}
.v-toc-item:active>span {
    color: var(--d-bc);
}
:is(.v-toc-item:active, .md-toc-item:active, .v-doc-lib-item:active) svg>use {
    fill: var(--d-bc);
    opacity: 1;
}

:is(.v-toc-item, .v-cap-1)>span {  // 题注前缀
    color: var(--h-f);
}

.v-toc-item>div>label,
.v-map-item>span,
.v-toc-item>span {
    display: block;
    font-size: .875em;
    margin-bottom: 4px;
    word-wrap: break-word;
    word-break: break-all;
}
.v-map-item>span {
    margin-top: 5px;
    margin-bottom: 0;
}

// 文档导航历史中针对「继续上次阅读」的条目样式
.v-toc-item[data-history="last-position"] {
    font-weight: bold;
}
.v-toc-item[data-history="last-position"]::before {
    content: "❯";
    font-weight: normal;
    position: absolute;
    right: 20px;
}

.v-map-item.hover {
    box-shadow: 0 0 0 2px var(--d-fc-a) inset;
}

// 链接地图中的链接
.v-map-item>div {
    display: inline-flex;
    align-items: center;
}

// .v-map-item>a:first-of-type {
.v-map-item>div>a {
    word-break: break-all;
    color: var(--d-fc);
}
// .v-map-item>a:not(:first-of-type) {
.v-map-item>a {
    font-size: .875em;
}

// 直达各页面锚点的链接样式微调
.v-map-item>a[id^="hash"] {
    padding-top: 10px;
    display: inline-block;
}

.v-map-item>div>label {
    font-size: .75em;
    line-height: 1.5;
    padding: 0 0 0 6px;
    margin-left: 10px;
    color: var(--d-bc);
    background-color: var(--d-fc-a);
    border: 1px solid var(--d-fc-a);
    border-radius: var(--v-r-s) var(--v-r-s-xc);
    word-break: break-all;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    white-space: pre-wrap;
}

.v-link-info-list-items {
    counter-reset: mapItemCounter;
}
.v-link-info-list-items .v-map-item {
    counter-increment: mapItemCounter;
}
.v-map-item > span {
    color: var(--d-fc-a);
}
// .v-map-item>a:not([id])::before {
.v-map-item>div>a::before {
    content: counter(mapItemCounter) " • ";
}

@hashArrowWidth: 16px;
@hashArrowAngle: 120deg;
.v-map-item label>a {
    font-weight: bold;
    line-height: 1.5;
    color: var(--a-color);
    padding: 1px 6px 1px 18px;
    border-radius: 0 calc(var(--v-r-s-xc) - 1px) calc(var(--v-r-s) - 1px) 0;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    white-space: pre-wrap;
    background: linear-gradient(@hashArrowAngle,transparent @hashArrowWidth, var(--d-bc) @hashArrowWidth,var(--d-bc)),
        linear-gradient(180deg - @hashArrowAngle, transparent @hashArrowWidth, var(--d-bc) @hashArrowWidth, var(--d-bc));
}
.v-map-item label>a:hover {
    box-shadow: none !important;
}


.md-toc,
.v-toc {
    margin-top: 30px;
    border-radius: 0;
    font-size: 1em;
    line-height: 2;
}

#write .md-toc-item a {
    font-weight: normal;
    text-decoration: none;
    padding: 0 0 0 0;
    border-radius: 0;
    border: none;
}

#write .md-toc-item a:hover {
    color: var(--d-fc) !important;
    box-shadow: none;
    text-decoration: none;
    border: none;
}

.v-item-current {
    font-weight: var(--v-f-w-bd);
    background: var(--blockquote-bg);
    box-shadow: @tocItemCurrent_boxShadow;
}

.v-toc-folder {
    float: left;
    width: 20px;
}
.v-toc-folder>svg {
    margin-top: 1px;
    float: left;
}

.v-toc-folder.hover>svg>use {
    fill: var(--a-hover-color) !important;
}
.v-toc-folder.hover:active>svg>use {
    fill: @buttonForeColor !important;
}

.v-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: top;
    color: @buttonForeColor;
    padding: 0;
    width: var(--v-tb-btn-w);
    height: 30px;
    border-radius: var(--v-r-s) var(--v-r-s-xc);
    pointer-events: all;
}

.v-btn[data-btn-group]:not(:first-of-type) {
    height: 30px;
    margin-left: 2px;
}

// 按钮 pin 状态
.v-btn.selected {
    color: @buttonBgColor;
    background: @buttonForeColor !important;
    box-shadow: @contrastBorder;
}
.v-btn.selected svg>use {
    fill: @buttonBgColor;
}

.v-btn.first {
    border-top-left-radius: var(--v-r-s) !important;
    border-bottom-left-radius: var(--v-r-s-xc) !important;
}
.v-btn.middle {
    border-radius: 0 !important;
}
.v-btn.last {
    border-top-right-radius: var(--v-r-s-xc) !important;
    border-bottom-right-radius: var(--v-r-s) !important;
}

.v-btn.hover {
    background: var(--a-hover-color) !important;
    color: @buttonForeHoverColor !important;
}

.v-btn.hover>svg>use {
    fill: @buttonForeHoverColor;
}

.v-btn.float,
.v-btn-group.float {
    background: @buttonBgColor;
    padding: 0 2px;
}
.v-btn-group.float>.v-btn {
    box-shadow: none;
}
.v-btn-group.float>.v-btn[data-btn-group] {
    box-shadow: none;
    height: 26px;
    margin-top: 2px;
    margin-bottom: 2px;
    border-radius: @borderRadiusInner_2px;
}

@activeBoxShadow: 0 0 0 2px fade(@aActiveColor, 50%);
.v-btn:active {
    background: @aActiveColor !important;
    box-shadow: @activeBoxShadow !important;
    color: @buttonForeHoverColor;
    transition: none;
    z-index: 1;
}
.v-btn.v-float-card:active {
    box-shadow: @activeBoxShadow, var(--v-fl-sd), @contrastBorder !important;
}

.v-status-bar>div:not([class*="-info"]):active,
.v-nav-history>div:active {
    background: var(--d-fc-a) !important;
    color: var(--d-bc) !important;
    transition: none;
    z-index: 1;
}
.v-status-bar>div:not([class*="-info"]):active svg>use,
.v-nav-history>div:active svg>use {
    fill: var(--d-bc);
}

// 音频资源加载中动画
@keyframes loading-circle {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
}
.v-audio-mini-control.loading {
    animation: loading-circle 2s ease infinite;
}

.v-audio-mini-control {
    background: @buttonBgColor;
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    text-align: center;
    line-height: 30px;
    height: 30px;
    width: 30px;
    padding: 2px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.v-audio-mini-control.disabled {
    background: #B0B4B8;
    cursor: not-allowed;
}

.v-audio-mini-control.hover {
    background: var(--a-hover-color);
    box-shadow: var(--v-fl-sd);
    color: @buttonForeHoverColor;
}

.v-audio-mini-control.hover:active {
    background: @aActiveColor;
}

.v-duration {
    color: var(--d-fc-a);
    padding: 0 5px;
    font-weight: bold;
}

// 音频播放中状态
@keyframes breathe-circle {
    0% {
        box-shadow: 0 0 0 0 fade(@aHoverColor, 70%);
    }
    100% {
        box-shadow: 0 0 0 3px fade(@aHoverColor, 70%);
    }
}
.v-audio-mini-control.playing {
    animation: breathe-circle 500ms infinite alternate;
}

@chapterNavHeight: 50px;
.v-chapter-nav {
    color: @buttonForeColor;
    background: @buttonBgColor;
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    top: -50px;
    left: calc(var(--v-nav-center-w) + 50px); // 注意 +/- 号前后须留空格
    right: @writePaddingRight;
    height: @chapterNavHeight;
    position: fixed;
    padding: 0;
    vertical-align: middle;
    z-index: 100;
    user-select: none;
    display: none;
}

.v-chapter-nav-prev {
    top: 0;
    left: 0;
    width: 20%;
    height: 50px;
    position: absolute;
    border-radius: var(--v-r-b) 0 0 var(--v-r-b-xc);
}
// 无特效（effect=0）时使用的样式
.v-chapter-nav-prev.noeffect.hover {
    background: linear-gradient(to right, var(--a-hover-color), @buttonBgColor);
    border-bottom-left-radius: var(--v-r-b);
}
.v-chapter-nav-prev.effect.hover>svg>use,
.v-chapter-nav-prev.noeffect.hover>svg>use {
    fill: @buttonForeHoverColor;
}
.v-chapter-nav-prev.effect.hover>.v-chapter-nav-prev-text,
.v-chapter-nav-prev.noeffect.hover>.v-chapter-nav-prev-text {
    color: @buttonForeHoverColor;
}
// 有特效（effect>=1）时使用的样式
.v-chapter-nav-prev.effect::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to right, var(--a-hover-color), @buttonBgColor);
    border-radius: var(--v-r-b) 0 0 var(--v-r-b-xc);
    opacity: 0;
    z-index: -1;
    transition: all var(--v-trans-dur) ease-out;
}
// 有特效（effect>=1）时使用的样式
.v-chapter-nav-prev.effect.hover::before {
    opacity: 1;
}
// 无特效（effect=0）时，有特效（effect>=1）时使用的样式
.v-chapter-nav-prev.noeffect:active,
.v-chapter-nav-prev.effect:active,
.v-chapter-nav-prev.effect:active::before {
    background: linear-gradient(to right, desaturate(@aHoverColor, 30%), @buttonBgColor);
}

.v-chapter-nav-prev-text {
    top: 0;
    left: 40px;
    width: 100%;
    height: 50px;
    font: normal 1em/50px var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    color: @buttonForeColor;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    display: block;
}

.v-chapter-nav-doc-title {
    font: normal .75em/24px var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    text-align: center;
    margin-left: 200px;
    margin-right: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: auto;
    height: 22px !important;
    display: block;
}
.v-chapter-nav-doc-title.in-start {
    margin-left: 15px;
    font-weight: var(--v-f-w-bd);
    font-size: 1.25em;
    line-height: 50px;
    text-align: left;
    height: 50px !important;
    cursor: default;
}

.v-chapter-nav-current {
    font: var(--v-f-w-bd) 1em/22px var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    text-align: center;
    margin-left: 230px;
    margin-right: 230px;
    padding-top: 2px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: auto;
    height: 28px;
    display: block;
}
.v-chapter-nav-current>span {
    opacity: .75;
}
.v-chapter-nav-doc-title.effect.hover,
.v-chapter-nav-current.effect.hover {
    color: @buttonForeHoverColor;
}

// 无特效（effect=0）时使用的样式
.v-chapter-nav-doc-title.noeffect.hover,
.v-chapter-nav-current.noeffect.hover {
    background: linear-gradient(90deg, fade(@aHoverColor, 0%), var(--a-hover-color), fade(@aHoverColor, 0%));
    height: 28px;
    color: @buttonForeHoverColor;
}

// 有特效（effect>=1）时使用的样式
.v-chapter-nav-doc-title.effect::before,
.v-chapter-nav-current.effect::before {
    content: attr(data-header-num);
    position: absolute;
    top: 22px;
    bottom: 0;
    left: 30%;
    right: 30%;
    height: 28px;
    background: linear-gradient(90deg, fade(@aHoverColor, 0%), var(--a-hover-color), fade(@aHoverColor, 0%));
    opacity: 0;
    z-index: -1;
    transition: all var(--v-trans-dur) ease-out;
}
.v-chapter-nav-doc-title.effect::before {
    top: 0;
    height: 22px;
}

// 有特效（effect>=1）时使用的样式
.v-chapter-nav-doc-title.effect.hover::before,
.v-chapter-nav-current.effect.hover::before {
    opacity: 1;
}
// 无特效（effect=0）时，有特效（effect>=1）时使用的样式
.v-chapter-nav-doc-title.noeffect:active,
.v-chapter-nav-doc-title.effect:active,
.v-chapter-nav-doc-title.effect:active::before,
.v-chapter-nav-current.noeffect:active,
.v-chapter-nav-current.effect:active,
.v-chapter-nav-current.effect:active::before {
    background: linear-gradient(90deg, fade(desaturate(@aHoverColor, 30%), 0%), desaturate(@aHoverColor, 30%), fade(desaturate(@aHoverColor, 30%), 0%));
    box-shadow: none;
}

.v-chapter-nav-next {
    top: 0;
    right: 0;
    width: 20%;
    height: 50px;
    position: absolute;
    border-radius: 0 var(--v-r-b-xc) var(--v-r-b) 0;
}
// 无特效（effect=0）时使用的样式
.v-chapter-nav-next.noeffect.hover {
    background: linear-gradient(to left, var(--a-hover-color), @buttonBgColor);
    border-bottom-right-radius: var(--v-r-b);
}
.v-chapter-nav-next.effect.hover>svg>use,
.v-chapter-nav-next.noeffect.hover>svg>use {
    fill: @buttonForeHoverColor;
}
.v-chapter-nav-next.noeffect.hover>.v-chapter-nav-next-text,
.v-chapter-nav-next.effect.hover>.v-chapter-nav-next-text {
    color: @buttonForeHoverColor;
}
// 有特效（effect>=1）时使用的样式
.v-chapter-nav-next.effect::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to left, var(--a-hover-color), @buttonBgColor);
    border-radius: 0 var(--v-r-b-xc) var(--v-r-b) 0;
    opacity: 0;
    z-index: -1;
    transition: all var(--v-trans-dur) ease-out;
}
// 有特效（effect>=1）时使用的样式
.v-chapter-nav-next.effect.hover::before {
    opacity: 1;
}
// 无特效（effect=0）时，有特效（effect>=1）时使用的样式
.v-chapter-nav-next.noeffect:active,
.v-chapter-nav-next.effect:active,
.v-chapter-nav-next.effect:active::before {
    background: linear-gradient(to left, desaturate(@aHoverColor, 30%), @buttonBgColor);
}

.v-chapter-nav-next-text {
    top: 0;
    right: 40px;
    width: 100%;
    height: 50px;
    font: normal 1em/50px var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    color: @buttonForeColor;
    text-align: right;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    display: block;
}

.v-btn-group.hover {
    outline: 1px solid var(--a-hover-color);
}
.v-btn-group.float {
    box-shadow: var(--v-fl-sd), @contrastBorder;
}

.v-btn-group.prs {
    margin: 0 0 0 var(--v-tb-btn-s);
    height: 30px;
    float: right;
    border-radius: var(--v-r-s) var(--v-r-s-xc);
}

.v-search-by-keyword {
    display: block;
    margin: 10px;
    pointer-events: all;
}

.v-focus-search.actived {
    filter: grayscale(50%) opacity(.5) !important;
}

// 输入框
.v-textfield {
    background: var(--d-bc);
    border-radius: var(--v-r-s) var(--v-r-s-xc);
    margin: 0;
    height: 36px;
}
// 注意 box-shadow 如有多段，且使用动画变换样式
// 须保持内、外阴影样式设置的顺序要一致，否则动画变换会失效
.v-textfield-focus,
.v-textfield.hover-action {
    box-shadow: var(--v-input-focus-inn-shadow), var(--v-input-focus-shadow);
}

// 输入提示
@{onHTML} :is(input::placeholder, input:focus::placeholder) {
    color: var(--d-fc-a);
    font-weight: normal;
}

// 输入框内的输入控件
.v-textfield>input {
    padding: 0;
    margin: 2px 0;
    width: calc(var(--v-nav-center-w) - 85px);
    height: 32px;
    color: var(--a-hover-color);
    background: var(--d-bc);
    border: none;
    float: left;
    outline: 0 solid transparent;
    // 输入光标颜色
    caret-color: var(--a-hover-color);
}
.v-textfield>input::input-placeholder,
.v-textfield>input::-webkit-input-placeholder,
.v-textfield>input::-moz-placeholder,
.v-textfield>input:-moz-placeholder {
    color: var(--d-fc-a) !important;
}
.v-textfield>input.set-icon {
    margin-left: 0;
}

.v-textfield-icon {
    width: 30px;
    height: 36px;
    padding: 7px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    float: left;
}

// 输入框内的动作按钮
.v-textfield-action {
    width: 40px;
    height: 30px;
    text-align: center;
    border-radius: 0 var(--v-r-s-xc) var(--v-r-s) 0;
    box-shadow: 1px 0 0 0 var(--pn-c-a) inset;
    float: right;
    display: none;
}
.v-textfield-action.enabled {
    background: @buttonBgColor;
    box-shadow: none;
}
.v-textfield-action.enabled>svg>use {
  fill: @buttonForeColor;
  opacity: 1;
}
.v-textfield-action.hover {
    background: var(--a-hover-color);
}
.v-textfield-action.hover>svg>use {
    fill: @buttonForeHoverColor;
}
.v-textfield-action.hover:active {
    background: @aActiveColor;
}

.v-textfield-reset {
    width: 30px;
    height: 32px;
    margin: 2px;
    right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    text-align: center;
    visibility: hidden;
    position: absolute;
    background-color: var(--d-bc);
    border-radius: var(--v-r-s) var(--v-r-s-xc);
}
.v-textfield-reset.enabled {
    visibility: visible;
    cursor: var(--cur-pointer);
}
.v-textfield-reset:hover>svg>use {
    opacity: .5;
}
.v-textfield-reset:active>svg>use {
    opacity: .75;
}

// 针对导航中心 tab 栏内按钮
.v-accent-btn.figure-nav {
    display: inline-block;
    margin: 0 10px 10px 10px;
}

.v-index-filter-result {
    display: none;
    width: 100%;
    height: 100%;
    padding: 30px 0 0 0;
    overflow-y: scroll;
}

.v-btn.nav-center {
    float: left;
}

.v-btn.doc-lib {
    margin-left: var(--v-tb-btn-s);
    float: left;
    display: none;
}

.v-fig-nav {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, .5), rgba(0, 0, 0, .9));
    position: fixed;
    visibility: hidden;
    opacity: 0;
    user-select: none;
    z-index: 2200;
}

// 插图导航中的导航按钮
.v-fig-nav-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    color: @buttonForeColor;
    padding: 0;
}
// 插图导航中的上一插图按钮
.v-fig-nav-btns.prev {
    left: 0;
    top: auto;
    width: 30px;
    height: 70px;
    box-shadow: @contrastBorder;
    position: absolute;
    bottom: 10px;
}
// 插图导航中的下一插图按钮
.v-fig-nav-btns.next {
    right: 0;
    top: auto;
    width: 30px;
    height: 70px;
    box-shadow: @contrastBorder;
    position: absolute;
    bottom: 10px;
}
.v-fig-nav-btns.next>svg {
    transform: rotate(180deg);
}

.v-btn-close-figure-nav {
    display: flex;
    align-items: normal;
    justify-content: flex-end;
    vertical-align: middle;
    color: #FFFFFF;
    background: @buttonBgColor;
    right: -2px;
    top: -2px;
    width: 50px;
    height: 50px;
    padding: 12px 12px 8px 8px;
    box-shadow: @contrastBorder;
    border-radius: 0 0 0 50px;
    position: absolute;
}

.v-btn-close-figure-nav:hover {
    background: var(--a-hover-color);
    box-shadow: var(--v-fl-sd);
    transform: translate(-2px, 2px) ;
}

.v-btn-close-figure-nav:active {
    background: @aActiveColor;
    box-shadow: @activeBoxShadow !important;
    transform: none;
}

.v-content-assistor {
    visibility: hidden;
    opacity: 1;
    position: absolute;
    background: @docLibButtonBgColor;
    border-radius: var(--v-r-si) var(--v-r-si-xc);
    padding: 0 1px;
    height: 30px;
    z-index: 20;
}

// 内容助手按钮
.v-btn.assistor {
    top: 0;
    width: 36px;
    height: 26px;
    border-radius: @borderRadiusInnerSi_1px;
    margin: 2px 1px;
    position: relative;
    display: none;
}
.v-btn.assistor.enabled {
    display: inline-flex;
}

.v-pic-in-pic {
    display: none;
    position: fixed;
    background: var(--h-f);
    border-radius: var(--v-r-b)  var(--v-r-t-xc);
    right: @writePaddingRight;
    bottom: 10px;
    padding: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
    z-index: 500;
}
.v-pic-in-pic>.v-content {
    overflow: auto;
    height: 100%;
    background-color: var(--d-bc);
}
.v-pic-in-pic>.v-content,
.v-pic-in-pic>.v-content>:is(table, .v-fig) {
    border-radius: calc(var(--v-r-b) - 4px) calc(var(--v-r-b-xc) - 4px) !important;
}
.v-pic-in-pic>.v-content>table :is(th, td) {
    white-space: pre !important;
}

.v-pip-btn {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    background: var(--d-bc);
    border-radius: 50%;
    top: 8px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    z-index: 20;
}
.v-pip-btn.min.zoom-in {
    top: 6px;
}
.v-pip-btn.min.zoom-out {
    top: 3px;
}

.v-pip-btn.close {
    right: 8px;
}

.v-pip-btn.zoom.zoom-in {
    right: 32px;
}
.v-pip-btn.zoom.zoom-out {
    right: 38px;
}

.v-pip-btn.zoom-in {
    width: 20px;
    height: 20px;
}
.v-pip-btn.zoom-out {
    width: 26px;
    height: 26px;
}

.v-pip-btn.zoom-in>svg {
    transform: scale(1);
}
.v-pip-btn.zoom-out>svg {
    transform: scale(1.33);
}
.v-pip-btn:hover>svg>use {
    fill: var(--a-hover-color);
}
.v-pip-btn:active>svg>use {
    fill: @aActiveColor;
}

#doc-lib-toc {
    margin-top: 1em;
}

@vdlBtnH: 40px;
@vdlBtnAniPadding: 10px;
.v-doc-lib-item {
    font: normal 1em/@defaultLineHeight var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    text-transform: uppercase;
    color: var(--d-fc);
    height: @vdlBtnH;
    padding: @vdlBtnAniPadding 5px;
    margin: 0 @vdlBtnAniPadding 2px;
    border-radius: var(--v-r-s) var(--v-r-s-xc);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: pre;
    display: flex;
    align-items: center;
    vertical-align: middle;
}
.v-index-filter-result .v-doc-lib-item:first-of-type {
    margin-top: 10px;
}
.v-doc-lib-item.hover {
    background-color: var(--pn-c-a);
    box-shadow: 0 0 0 2px var(--ac-t2-fade) inset;
}
.v-doc-lib-item.hover svg>use {
    opacity: 1;
}
.v-btn.assistor:hover>svg>use {
    fill: @docLibButtonForeHoverColor;
}

// 文库条目内的图标
.v-doc-lib-item>span {
    margin-left: 5px;
    margin-right: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
// 文库条目内的文本
.v-doc-lib-item>div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// 文档抽屉
.v-doc-lib {
    visibility: hidden;
    background: var(--d-bc);
    box-shadow: 0 0 0 2px var(--d-fc-a);
    margin: 0;
    border: none;
    border-radius: 0 0 var(--v-r-b) var(--v-r-b);
    position: fixed;
    left: 10%;
    top: 0;
    right: 10%;
    bottom: @floatTopBottom * 2;
    z-index: 5000;
}
.v-doc-lib>iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0 0 var(--v-r-b) var(--v-r-b);
    overflow: auto;
}

// 统计、检查更新的 iframe
iframe[name^="vlook-stat-"],
iframe[id^="vlook-chk-update-"] {
    display: block;
    margin: 0;
    border: none;
    overflow: hidden;
    width: 100%;
    height: 0;
}

// --------------------
@iframeVideoOnEditing: ~'@{writeOnEditing} .md-htmlblock';
@iframeVideo: @writeOnHTML;
// 视频嵌入代码：B站
@biliVideo: ~'iframe[src*="bilibili.com/player"]';
// 视频嵌入代码：抖音
@douyinVideo: ~'iframe[src*="douyin.com/player"]';
// 视频嵌入代码：西瓜
@xiguaVideo: ~'iframe[src*="ixigua.com/iframe"]';
// 视频嵌入代码：腾讯
@qqVideo: ~'iframe[src*="qq.com/txp/iframe"]';
// 视频嵌入代码：YouTube
@youtubeVideo: ~'iframe[src*="youtube.com/embed"]';
// 流媒体平台
@{iframeVideoOnEditing} @{biliVideo},
@{iframeVideoOnEditing} @{douyinVideo},
@{iframeVideoOnEditing} @{xiguaVideo},
@{iframeVideoOnEditing} @{qqVideo},
@{iframeVideoOnEditing} @{youtubeVideo} {
    width: 80% !important; // 编辑时无题注容器（导出 HTML 后由题注容器控制宽度），所以要直接控制自身宽度
    display: block;
    aspect-ratio: 16/9 !important; // 指定 width 和 height 的等比缩放比例
    height: auto !important;
    margin: 0;
}
@{iframeVideo} @{biliVideo},
@{iframeVideo} @{douyinVideo},
@{iframeVideo} @{xiguaVideo},
@{iframeVideo} @{qqVideo},
@{iframeVideo} @{youtubeVideo} {
    display: block;
    aspect-ratio: 16/9 !important; // 指定 width 和 height 的等比缩放比例
    height: auto !important;
    margin: 0;
}
// ----- 竖屏视频 -----
// 竖屏标识 portrait
@portraitMode: ~'[src*="#pt"]';
@{iframeVideoOnEditing} @{biliVideo}@{portraitMode},
@{iframeVideoOnEditing} @{douyinVideo}@{portraitMode},
@{iframeVideoOnEditing} @{xiguaVideo}@{portraitMode},
@{iframeVideoOnEditing} @{qqVideo}@{portraitMode},
@{iframeVideoOnEditing} @{youtubeVideo}@{portraitMode},
@{iframeVideo} @{biliVideo}@{portraitMode},
@{iframeVideo} @{douyinVideo}@{portraitMode},
@{iframeVideo} @{xiguaVideo}@{portraitMode},
@{iframeVideo} @{qqVideo}@{portraitMode},
@{iframeVideo} @{youtubeVideo}@{portraitMode} {
    display: block;
    width: 330px !important;
    aspect-ratio: 9/16 !important; // 指定 width 和 height 的等比缩放比例
    height: auto !important;
}

.v-interactive.hover {
    border-color: var(--a-hover-color) !important;
}
.v-interactive.hover:active {
    box-shadow: 0 0 0 2px fade(@aHoverColor, 50%);
}
.v-interactive.hover:active {
    border-color: @aActiveColor !important;
    box-shadow: none;
    transform: none;
}

// 指定在 Dark Mode 时反转的图片样式
.v-img-invert-dark {
    background-color: #FFFFFF !important;
    filter: var(--v-invert-dark);
}

// 针对 Light 模式的插图网格背景
.v-fig-solid-bg-light {
    background: var(--fig-solid-bg);
}
.v-fig-grid-line-light {
    background: var(--v-fig-grid-l) !important;
}
.v-fig-grid-block-light {
    background: var(--v-fig-grid-b) !important;
}

// 针对 Dark Mode 的插图网格背景
.v-fig-solid-bg-dark {
    background-color: var(--fig-solid-bg);
}
.v-fig-grid-line-dark {
    background: var(--v-fig-grid-l) !important;
}
.v-fig-grid-block-dark {
    background: var(--v-fig-grid-b) !important;
}
.v-fig-grid-line-dark-invert {
    background: var(--v-fig-grid-l-invert) !important;
}
.v-fig-grid-block-dark-invert {
    background: var(--v-fig-grid-b-invert) !important;
}

.v-fig-content {
    margin: 5px;
    padding: 40px 30px 20px;
    display: table-cell;
    align-content: center;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    color: var(--d-fc);
}

.v-fig-nav-title {
    color: #C0C4C8 !important;
    left: 10px;
    top: 10px;
    position: absolute;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.v-fig-page-num {
    border-radius: var(--v-r-s) var(--v-r-s-xc);
    color: #FFFFFF;
    background: var(--d-fc-a);
    padding: 1px 8px;
    font: normal .875em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
}

// 题注
.v-caption {
    display: inline-block;
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    background: @captionBackground;
    text-align: center;
}
.v-caption.iframe {
    width: 80%;
}
// 一行多个插图时的微调
.v-cap-cntr>.v-caption:not(:only-child) {
    margin-bottom: @scrollFix !important;
}

// 针对插图加载过程的提示样式
.v-caption.loading::before {
    content: "loading...";
    text-transform: uppercase;
    color: var(--d-bc);
    background: var(--d-fc);
    opacity: .6;
    font-size: .75em;
    font-style: oblique;
    border: 1px solid var(--d-bc);
    border-radius: var(--v-r-s) var(--v-r-s-xc);
    position: absolute;
    padding: 0 10px;
    left: 50%;
    top: 10px;
    // top: 50%;
    // transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%);
}

// 代码块题注样式
.v-caption.codeblock {
    width: 100%;
    background-color: var(--std-code-shadow);
    box-shadow: 0 0 0 2px var(--std-code-shadow) inset;
}
.v-caption.codeblock > .v-cap-1 > span {
    color: var(--d-fc);
    opacity: .6;
}
.v-caption.codeblock > :is(.v-cap-1, .v-cap-2) {
    color: var(--d-fc);
}
.v-caption.codeblock > .v-cap-1 {
    background-color: var(--std-code-shadow);
    background-image: var(--v-i-sys-menu);
    background-repeat: no-repeat;
    background-position: 10px center;
}
.v-caption.codeblock > .v-cap-1::after {
    content: attr(lang);
    text-transform: uppercase;
    color: var(--d-fc);
    opacity: .6;
}

// 题注内容隐藏
.v-caption.hidden > figcaption {
    display: none;
}

// 生成题注后的样式调整
.v-caption>.md-fences {
    margin: 0;
}

.v-cap-1,
.v-cap-2 {
    color: @captionTextColor;
    font: normal .875em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
    padding: 6px 10px 5px;
    width: auto !important;
    white-space: pre-wrap;
}
.v-cap-2 {
    margin: 3px 10px 5px 10px !important;
    font-style: italic;
}

.v-cap-cntr {
    border-radius: var(--v-r-b);
}
.v-cap-cntr:last-child {
    margin-bottom: 0;
}
// 题注容器：展开全部样式
@expanderHeight: 100px;
.v-cap-cntr.expander::before {
    content: attr(data-ex-label);
    text-transform: uppercase;
    line-height: 1.25;
    white-space: pre;
    color: var(--a-color);
    font-size: .875em;
    font-weight: var(--v-f-w-bd);
    text-align: center;
    width: 100%; // 实际以生成 HTML 后根据实际内容序号自动适配对应样式 .v-cap-cntr.expander.id-sharpMagicImgContanier
    height: @expanderHeight;
    top: calc(var(--v-ex-limit) - @expanderHeight);
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(0deg, @docMoreContentLg);
    z-index: 10;
}
.v-cap-cntr.expander:hover::before {
    color: var(--a-hover-color);
}

// 用于折叠类、表格列格式复选框的小图标
.v-svg-small-ico {
    display: inline-block;
    overflow: visible;
}
// 表格列复选框透明度微调
.v-svg-small-ico[data-chk="no"] {
    opacity: .4;
}

// 旋转 45 度
@opacityForOpened: .6;
.v-rotate45 {
    transform: rotate(45deg);
    opacity: @opacityForOpened;
}
// 旋转 90 度
.v-rotate90 {
    transform: rotate(90deg);
    opacity: @opacityForOpened;
}

use.v-svg-ico-light {
    fill: @buttonForeColor;
}

use.v-svg-ico-dark {
    fill: var(--d-fc);
}

use.v-svg-ico-alpha {
    fill: var(--d-fc);
    opacity: .35;
}

use.v-svg-ico-theme {
    fill: var(--a-color);
}

use.v-svg-ico-btn-fc {
    fill: @buttonForeColor;
}

use.v-svg-ico-a {
    fill: var(--d-fc-a);
}

use.v-svg-ico-wh {
    fill: #FFFFFF;
}

.v-svg-chp-nav {
    position: absolute;
    top: 18px;
}
.v-svg-chp-nav.left {
    left: 15px;
}
.v-svg-chp-nav.right {
    right: 15px;
    transform: rotate(180deg);
}

.v-svg-details {
    margin-right: 5px;
}

// 遮罩样式
.v-mask {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    position: fixed;
    background: rgba(0, 0, 0, .6);
    display: none;
    z-index: 1000;
}
// 遮罩扩展样式
@lgOpacity: 15%;
.v-mask.left {
    background: linear-gradient(90deg, @theme1 30%, fade(@theme1, @lgOpacity)), linear-gradient(0deg, fade(@theme1, 50%), transparent 50px, transparent);
}
.v-mask.right {
    background: linear-gradient(270deg, @theme1 30%, fade(@theme1, @lgOpacity)), linear-gradient(0deg, fade(@theme1, 50%), transparent 50px, transparent);
}
.v-mask.top {
    background: linear-gradient(180deg, @theme1 40%, fade(@theme1, 50%)), linear-gradient(0deg, fade(@theme1, 50%), transparent 50px, transparent);
}
.v-mask.bottom {
    background: linear-gradient(0deg, @theme1 40%, fade(@theme1, @lgOpacity));
}
.v-mask.center {
    background: radial-gradient(ellipse, @theme1 40%, fade(@theme1, @lgOpacity)), linear-gradient(0deg, fade(@theme1, 50%), transparent 50px, transparent);
}

// 遮罩关闭提示器样式
.v-mask-close {
    position: fixed;
    width: 60px;
    height: 60px;
    opacity: .7;
}
// 遮罩关闭提示器扩展样式
.v-mask-close.left,
.v-mask-close.right {
    width: 16px;
    height: 60px;
    // 垂直居中
    top: 50%;
    transform: translateY(-50%);
}
.v-mask-close.right>svg {
    transform: rotate(180deg);
}
.v-mask-close.bottom {
    width: 60px;
    height: 16px;
    // 水平居中
    left: 50%;
    transform: translateX(-50%);
}
.v-mask-close.bottom>svg {
    transform: rotate(270deg);
}
.v-backdrop-blurs.enabled {
    backdrop-filter: saturate(180%) blur(15px);
    -webkit-backdrop-filter: saturate(180%) blur(15px);
}
.v-backdrop-blurs.disabled {
    backdrop-filter: unset;
    -webkit-backdrop-filter: unset;
    background-color: var(--pn-c);
}

#v-pg-nav-mask-border {
    border: 1px solid var(--a-color);
    box-shadow: var(--v-input-focus-shadow);
    position: absolute;
    border-radius: var(--v-r-s) var(--v-r-s-xc);
    display: none;
    z-index: 30;
    pointer-events: none;
}
#v-pg-nav-mask-border.pause {
    border: none;
    outline: 3px solid var(--a-hover-color);
    box-shadow: none;
    animation: flash 1.5s ease-out infinite alternate;
}
#v-pg-nav-mask-border.pause::before {
    content: attr(data-title);
    text-transform: uppercase;
    color: @buttonForeColor;
    background: var(--a-hover-color);
    font-weight: bold;
    font-size: .875em;
    position: absolute;
    padding: 2px 8px;
    border-radius: var(--v-r-s) 0;
}

// 引用块着色
@{writeOnHTML} .v-q {
    color: var(--d-fc);
    width: auto;
    border: none;
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    padding: .75em
}
// 生成引用块着色相关样式
.genRainbowQuoteCSS(@quoteMark, @accColor, @btnBg, @btnFore) {
    #write .v-q.@{quoteMark} {
        .genQuote(@quoteMark) when not (@quoteMark = bk) { // not Black
            box-shadow: 0 0 0 4px ~"var(--ac-@{quoteMark}-fade)" inset;
        }
        .genQuote(@quoteMark) when (@quoteMark = bk) { // Black
            box-shadow: 0 0 0 4px var(--d-fc) inset;
        }
        .genQuote(@quoteMark);
        background: none;
        border-color: @btnBg !important;
    }
    // 代码、题注
    #write .v-q.@{quoteMark} :is(.v-std-code, .v-cap-1>span) {
        color: @accColor !important;
    }
    // 强调样式
    #write .v-q.@{quoteMark}.em {
        box-shadow: none;
        .genQuoteEm(@quoteMark) when not (@quoteMark = bk) { // not Black
            background: ~"var(--ac-@{quoteMark}-fade)" !important;
        }
        .genQuoteEm(@quoteMark) when (@quoteMark = bk) { // Black
            color: var(--d-bc) !important;
            background: var(--d-fc) !important;
        }
        .genQuoteEm(@quoteMark);
        border-color: @btnBg !important;
    }
    // 高亮
    #write .v-q.@{quoteMark} mark {
        box-shadow: 0 -@markBgHeight 0 0 ~"var(--ac-@{quoteMark}-fade)" inset;
    }
    .genQuoteMarkEm(@quoteMark) when (@quoteMark = bk) {
        #write .v-q.@{quoteMark}.em mark {
            box-shadow: 0 -@markBgHeight 0 0 ~"var(--ac-wt-fade)" inset;
        }
    }
    .genQuoteMarkEm(@quoteMark);

    // 表格列格式、行分组、任务列表的复选框控件
    #write .v-q.@{quoteMark} :is(.v-tbl-col-fmt-chkbox>svg>use, .v-tbl-row-g-btn>svg>use, .v-svg-input-checkbox>use) {
        fill: @btnBg;
    }
    .genQuoteSvgEm(@quoteMark) when (@quoteMark = bk) { // 引用块折叠控件
        #write .v-q.@{quoteMark}.em :is(.v-tbl-col-fmt-chkbox>svg>use, .v-tbl-row-g-btn>svg>use, .v-svg-input-checkbox>use),
        #write .v-q.@{quoteMark}.em :is(summary>svg>use) {
            fill: var(--d-bc);
        }
    }
    .genQuoteSvgEm(@quoteMark);

    // 主要按钮链接
    #write .v-q.@{quoteMark} a kbd {
        color: @btnFore;
        background: @btnBg;
        border: 2px solid @btnBg;
    }
    .genQuoteAkbd(@quoteMark) when (@quoteMark = bk) {
        #write .v-q.@{quoteMark}.em a kbd {
            color: var(--d-fc);
            background: var(--d-bc);
            border-color: var(--d-bc);
        }
    }
    .genQuoteAkbd(@quoteMark);

    // 主要按钮链接：图片剪影
    .genQuoteAkbdImgFillEm(@quoteMark) when not (@quoteMark = bk) { // not Black
        #write .v-q.@{quoteMark} a kbd>img[src*="fill=text"].enabled {
        filter: drop-shadow(@fillOffset 0 0 @btnFore) !important;
        }
        #write .v-q.@{quoteMark} a kbd @{svgGs} {
            fill: @btnFore !important;
        }
    }
    .genQuoteAkbdImgFillEm(@quoteMark) when (@quoteMark = bk) { // Black
        #write .v-q.@{quoteMark}.em a kbd>img[src*="fill=text"].enabled {
            filter: drop-shadow(@fillOffset 0 0 var(--d-fc)) !important;
        }
        #write .v-q.@{quoteMark}.em a kbd @{svgGs} {
            fill: var(--d-fc) !important;
        }
    }
    .genQuoteAkbdImgFillEm(@quoteMark);

    #write .v-q.@{quoteMark} a kbd:hover {
        color: @buttonForeHoverColor;
        background: var(--a-hover-color);
        border-color: var(--a-hover-color);
    }
    #write .v-q.@{quoteMark} a kbd:hover>img[src*="fill=text"].enabled,
    #write .v-q.bk.em a kbd:hover>img[src*="fill=text"].enabled { // Black
        filter: drop-shadow(@fillOffset 0 0 @buttonForeHoverColor) !important;
    }
    #write .v-q.@{quoteMark} a kbd:hover @{svgGs},
    #write .v-q.bk.em a kbd:hover @{svgGs} { // Black
        fill: @buttonForeHoverColor !important;
    }
    // 次要按钮链接
    #write .v-q.@{quoteMark} @{kbdSec} {
        color: @btnBg;
        background: var(--d-bc);
    }
    .genQuoteAkbdSec(@quoteMark) when (@quoteMark = bk) { // Black
        #write .v-q.@{quoteMark}.em @{kbdSec} {
            color: var(--d-bc);
            background: var(--d-fc);
            border-color: var(--d-bc);
        }
    }
    .genQuoteAkbdSec(@quoteMark);

    // 次要按钮链接：图片剪影
    #write .v-q.@{quoteMark} @{kbdSec}>img[src*="fill=text"].enabled {
        filter: drop-shadow(@fillOffset 0 0 @accColor) !important;
    }
    #write .v-q.@{quoteMark} @{kbdSec}>@{svgGs} {
        fill: @accColor !important;
    }
    .genQuoteAkbdImgFillEm(@quoteMark) when (@quoteMark = bk) { // Black
        #write .v-q.@{quoteMark}.em @{kbdSec}>img[src*="fill=text"].enabled {
            filter: drop-shadow(@fillOffset 0 0 var(--d-bc)) !important;
        }
        #write .v-q.@{quoteMark}.em @{kbdSec}>@{svgGs} {
            fill: var(--d-bc) !important;
        }
    }
    .genQuoteAkbdImgFillEm(@quoteMark);

    #write .v-q.@{quoteMark} @{kbdSec}:hover {
        color: var(--a-hover-color);
    }
    #write .v-q.@{quoteMark} @{kbdSec}:hover>img[src*="fill=text"].enabled,
    #write .v-q.bk.em @{kbdSec}:hover>img[src*="fill=text"].enabled { // Black
        filter: drop-shadow(@fillOffset 0 0 var(--a-hover-color)) !important;
    }
    #write .v-q.@{quoteMark} @{kbdSec}:hover @{svgGs},
    #write .v-q.bk.em @{kbdSec}:hover @{svgGs} { // Black
        fill: var(--a-hover-color) !important;
    }
    // 链接
    #write .v-q.@{quoteMark} a {
        color: @btnBg;
    }
    .genQuoteAlinkEm(@quoteMark) when (@quoteMark = bk) { // Black
        #write .v-q.@{quoteMark}.em a {
            color: var(--d-bc);
        }
    }
    .genQuoteAlinkEm(@quoteMark);

    #write .v-q.@{quoteMark} a>img[src*="fill=text"].enabled {
        filter: drop-shadow(@fillOffset 0 0 @btnBg) !important;
    }
    #write .v-q.@{quoteMark} a>@{svgGs} {
        fill: @btnBg !important;
    }
    .genQuoteAlinkImgFillEm(@quoteMark) when (@quoteMark = bk) { // Black
        #write .v-q.@{quoteMark}.em a>img[src*="fill=text"].enabled {
            filter: drop-shadow(@fillOffset 0 0 var(--d-bc)) !important;
        }
        #write .v-q.@{quoteMark}.em a>@{svgGs} {
            fill: var(--d-bc) !important;
        }
    }
    .genQuoteAlinkImgFillEm(@quoteMark);

    #write .v-q.@{quoteMark} a:hover {
        color: var(--a-hover-color) !important;
    }
    #write .v-q.@{quoteMark} a:hover>@{svgGs} {
        fill: var(--a-hover-color) !important;
    }
    #write .v-q.@{quoteMark} a:hover>img[src*="fill=text"].enabled {
        filter: drop-shadow(@fillOffset 0 0 var(--a-hover-color)) !important;
    }
    // 明信片
    #write .v-q.@{quoteMark} img[src*="#cardd"]+.v-post-card {
        background: linear-gradient(180deg, ~"var(--ac-@{quoteMark}-fade)", var(--pn-c) 20px, var(--pn-c)), var(--pn-c);
    }
    // 明信片带 #border 时，导出后的微调（指定色号时）
    #write .v-q.@{quoteMark}:has(>p img[src*="#card"][src*="#border"]),
    #write .v-q.@{quoteMark}.em:has(>p img[src*="#card"][src*="#border"]) {
        background: linear-gradient(180deg, ~"var(--ac-@{quoteMark}-fade)", ~"var(--ac-@{quoteMark})", ~"var(--ac-@{quoteMark}-fade)") !important;
        padding: 0;
    }
    // 标题
    #write .v-q .title-@{quoteMark} {
        color: ~"var(--ac-@{quoteMark}-title-lg)";
    }
    // 强调标题
    #write .v-q .title-@{quoteMark}.em {
        .genQuoteTitleEm(@quoteMark) when not (@quoteMark = bk) { // not Black
            color: ~"var(--ac-@{quoteMark}-title)";
        }
        .genQuoteTitleEm(@quoteMark) when (@quoteMark = bk) { // Black
            color: var(--d-bc);
        }
        .genQuoteTitleEm(@quoteMark);
    }
    // 列表符号
    #write .v-q.@{quoteMark} ::marker,
    #write .v-q.@{quoteMark} li::before {
        color: @accColor;
    }
    .genQuoteMarker(@quoteMark) when (@quoteMark = bk) { // Black
        #write .v-q.@{quoteMark}.em ::marker,
        #write .v-q.@{quoteMark}.em li::before {
            color: var(--d-bc);
        }
    }
    .genQuoteMarker(@quoteMark);
}
.genRainbowQuoteCSS(rd, @accColorRed, @accColorRed, #FFFFFF);
.genRainbowQuoteCSS(og, @accColorOrange, @accColorOrange, #FFFFFF);
.genRainbowQuoteCSS(ye, @accColorYellow, @accColorYellow, #000000);
.genRainbowQuoteCSS(lm, @accColorLime, @accColorLime, #000000);
.genRainbowQuoteCSS(gn, @accColorGreen, @accColorGreen, #FFFFFF);
.genRainbowQuoteCSS(mn, @accColorMineral, @accColorMineral, #FFFFFF);
.genRainbowQuoteCSS(ol, @accColorOlives, @accColorOlives, #FFFFFF);
.genRainbowQuoteCSS(wn, @accColorWine, @accColorWine, #FFFFFF);
.genRainbowQuoteCSS(aq, @accColorAqua, @accColorAqua, #000000);
.genRainbowQuoteCSS(cy, @accColorCyan, @accColorCyan, #FFFFFF);
.genRainbowQuoteCSS(bu, @accColorBlue, @accColorBlue, #FFFFFF);
.genRainbowQuoteCSS(se, @accColorSea, @accColorSea, #FFFFFF);
.genRainbowQuoteCSS(la, @accColorLavender, @accColorLavender, #000000);
.genRainbowQuoteCSS(vn, @accColorVine, @accColorVine, #FFFFFF);
.genRainbowQuoteCSS(pu, @accColorPurple, @accColorPurple, #FFFFFF);
.genRainbowQuoteCSS(ro, @accColorRose, @accColorRose, #FFFFFF);
.genRainbowQuoteCSS(pk, @accColorPink, @accColorPink, #000000);
.genRainbowQuoteCSS(gd, @accColorGold, @accColorGold, #000000);
.genRainbowQuoteCSS(bn, @accColorBrown, @accColorBrown, #FFFFFF);
.genRainbowQuoteCSS(gy, @accColorGray, @accColorGray, #FFFFFF);
.genRainbowQuoteCSS(wt, var(--d-fc), var(--d-fc), var(--d-bc));
.genRainbowQuoteCSS(bk, var(--d-fc), var(--d-fc), var(--d-bc));
.genRainbowQuoteCSS(t1, var(--ac-t1), var(--ac-t1), @docLibButtonForeColor);
.genRainbowQuoteCSS(t2, @theme2, var(--a-hover-color), @buttonForeHoverColor);

// ----------
.v-tag,
.v-badge-name,
.v-badge-name > label,
.v-badge-value,
.v-std-code {
    cursor: var(--cur-copy);
}

// 编辑时标签样式
@tagOnEditing: ~'@{writeOnEditing} em>span[md-inline="code"]:only-child>code';
@tagOnOutline: ~".outline-content em:only-child>code";
@{tagOnEditing},
@{tagOnOutline},
.v-tag {
    font: var(--v-f-w-bd) .875em var(--v-f-fm-tag); // [style] [weight] [size/[line-height]] [family]
    text-shadow: none;
    padding: 4px 6px;
    color: var(--ac-t2);
    background: var(--ac-t2-a);
    border-radius: var(--v-r-tag) var(--v-r-tag-xc);
    border: 1px solid var(--ac-t2-fade-bd) !important;
    white-space: pre;
    line-height: 1;
    vertical-align: middle;
}
.v-tag.hover {
    filter: brightness(@hoverBrightness);
}

// 生成标签相关样式
.genRainbowTagCSS(@tagMark, @tagColor, @tagText) {
    .v-tag.@{tagMark} {
        .genColor(@tagMark) when not (@tagMark = wt) {
            color: ~"var(--ac-@{tagColor})" !important;
            background: ~"var(--ac-@{tagMark}-a)" !important;
            border: 1px solid var(--d-bc) !important;
        }
        .genColor(@tagMark) when (@tagMark = wt) {
            color: @tagText !important;
            background: ~"var(--ac-@{tagMark})" !important;
            border: 1px solid var(--pn-c) !important;
        };
        .genColor(@tagMark);
        box-shadow: 0 0 0 1px ~"var(--ac-@{tagMark}-fade-bd)" inset !important;
    }
    .v-tag.@{tagMark}.em {
        color: @tagText !important;
        background: ~"var(--ac-@{tagMark})" !important;
        box-shadow: none !important;
    }
}
@deepTextColor: #FFFFFF;
@shallowTextColor: #000000;
@whiteTextColor: var(--d-fc);
@blackTextColor: var(--d-bc);
.genRainbowTagCSS(wn, wn, @deepTextColor);
.genRainbowTagCSS(rd, rd, @deepTextColor);
.genRainbowTagCSS(og, og, @deepTextColor);
.genRainbowTagCSS(ye, ye-title-lg, @shallowTextColor);
.genRainbowTagCSS(lm, lm-title-lg, @deepTextColor);
.genRainbowTagCSS(gn, gn, @deepTextColor);
.genRainbowTagCSS(mn, mn, @deepTextColor);
.genRainbowTagCSS(ol, ol, @deepTextColor);
.genRainbowTagCSS(aq, aq-title-lg, @deepTextColor);
.genRainbowTagCSS(cy, cy, @deepTextColor);
.genRainbowTagCSS(bu, bu, @deepTextColor);
.genRainbowTagCSS(se, se, @deepTextColor);
.genRainbowTagCSS(la, la-title-lg, @deepTextColor);
.genRainbowTagCSS(vn, vn, @deepTextColor);
.genRainbowTagCSS(pu, pu, @deepTextColor);
.genRainbowTagCSS(ro, ro, @deepTextColor);
.genRainbowTagCSS(pk, pk-title-lg, @shallowTextColor);
.genRainbowTagCSS(gd, gd-title-lg, @shallowTextColor);
.genRainbowTagCSS(bn, bn, @deepTextColor);
.genRainbowTagCSS(gy, gy, @deepTextColor);
.genRainbowTagCSS(wt, wt, @whiteTextColor);
.genRainbowTagCSS(bk, bk, @blackTextColor);
.genRainbowTagCSS(t1, t1, @buttonForeColor);
.genRainbowTagCSS(t2, t2, @deepTextColor);

@codeOnEditing: ~'span[md-inline="code"]';
@badgeOnEditingPrefix: ~"@{writeOnEditing} em";
@badgeOnEditing: ~'@{badgeOnEditingPrefix}:has(span:first-child+@{codeOnEditing})';
@badgeOnEditing2: ~'@{badgeOnEditingPrefix}:has(@{codeOnEditing}:first-child+span:last-child)';
// 多级标签样式名称公共样式
@{badgeOnEditing},
@{badgeOnEditing2},
.v-badge-name {
    display: inline-block;
    font: var(--v-f-w-bd) @codeFontSize var(--v-f-fm-tag); // [style] [weight] [size/[line-height]] [family]
    margin-right: 0;
    border-radius: var(--v-r-tag) var(--v-r-tag-xc);
    border: 1px solid var(--d-bc);
    color: @buttonForeColor;
    padding: 1px 1px 1px @codePaddingLeft;
    white-space: pre;
    line-height: 1;
    box-shadow: none !important;
}
@{badgeOnEditing},
@{badgeOnEditing2} {
    background-color: var(--ac-t1);
}
.v-badge-name.hover {
    filter: brightness(@hoverBrightness);
}
// 三段式，但没有标题时微调
@{badgeOnEditing2},
.v-badge-name:has(code:first-child+span:last-child) {
    padding-left: 1px !important;
}
// 三段式，多级标签有两个内容时微调
.v-badge-name.hastwo {
    padding-right: @codePaddingLeft !important;
}

// 多级标签内容（第2段）公共样式
// 编辑时的多级标签内容（第2段）
@{badgeOnEditingPrefix} > @{codeOnEditing}:not(:first-child) > code, // :first-child 时为 标签 tag
@{badgeOnEditingPrefix} > @{codeOnEditing}:not(:only-child):first-child > code,  // 没有标题，只有 value 和 value2
.v-badge-value {
    display: inline-block;
    font: var(--v-f-w-bd) 1em var(--v-f-fm-tag); // [style] [weight] [size/[line-height]] [family]
    color: var(--d-fc) !important;
    line-height: 1;
    white-space: pre;
    box-shadow: none !important;
    border: none !important;
}
// 变量
.v-badge-value>span.var {
    font-style: italic;
    font-weight: var(--v-f-w-text);
    opacity: .75;
}

// 引用块、详情内的微调
#write @{quote_details} code {
    vertical-align: initial;
}

// 多级标签内容公共样式
// 编辑时的多级标签内容
.v-badge-value.hover {
    filter: brightness(@hoverBrightness);
}
// 三段式，多级标签有两个内容时微调
@{badgeOnEditingPrefix} > @{codeOnEditing}:first-child+span:last-child {
    margin-left: 0 !important;
}

.genRainbowBadgeCSS(@badgeMark, @badgeColor, @tagText) {
    .v-badge-name.@{badgeMark} {
        color: @tagText;
        background: @badgeColor !important;
        .genColor(@badgeMark) when (@badgeMark = wt) {
            border-color: var(--pn-c) !important;
        }
        .genColor(@badgeMark);
    }
}
.genRainbowBadgeCSS(wn, var(--ac-wn), @deepTextColor);
.genRainbowBadgeCSS(rd, var(--ac-rd), @deepTextColor);
.genRainbowBadgeCSS(og, var(--ac-og), @deepTextColor);
.genRainbowBadgeCSS(ye, var(--ac-ye), @shallowTextColor);
.genRainbowBadgeCSS(lm, var(--ac-lm), @deepTextColor);
.genRainbowBadgeCSS(gn, var(--ac-gn), @deepTextColor);
.genRainbowBadgeCSS(mn, var(--ac-mn), @deepTextColor);
.genRainbowBadgeCSS(ol, var(--ac-ol), @deepTextColor);
.genRainbowBadgeCSS(aq, var(--ac-aq), @deepTextColor);
.genRainbowBadgeCSS(cy, var(--ac-cy), @deepTextColor);
.genRainbowBadgeCSS(bu, var(--ac-bu), @deepTextColor);
.genRainbowBadgeCSS(se, var(--ac-se), @deepTextColor);
.genRainbowBadgeCSS(la, var(--ac-la), @deepTextColor);
.genRainbowBadgeCSS(vn, var(--ac-vn), @deepTextColor);
.genRainbowBadgeCSS(pu, var(--ac-pu), @deepTextColor);
.genRainbowBadgeCSS(ro, var(--ac-ro), @deepTextColor);
.genRainbowBadgeCSS(pk, var(--ac-pk), @shallowTextColor);
.genRainbowBadgeCSS(gd, var(--ac-gd), @shallowTextColor);
.genRainbowBadgeCSS(bn, var(--ac-bn), @deepTextColor);
.genRainbowBadgeCSS(gy, var(--ac-gy), @deepTextColor);
.genRainbowBadgeCSS(wt, var(--d-bc), @whiteTextColor);
.genRainbowBadgeCSS(bk, var(--d-fc), @blackTextColor);
.genRainbowBadgeCSS(t1, @buttonBgColor, @buttonForeColor);
.genRainbowBadgeCSS(t2, @theme2, @buttonForeHoverColor);

// 针对 GitHub Style Alert (GSA) 通用样式
@alertTypePaddingTop: 0;
#write .md-alert {
    padding: @alertTypePaddingTop .75em .75em .75em !important;
    margin: .5em 0 0 0;
    background-color: var(--d-bc);
}
#write .md-alert @{quote_details} {
    background: var(--d-bc) !important;
    border-radius: var(--v-r-s) var(--v-r-s-xc);
    margin-bottom: 0;
}
#write @{quote_details} .md-alert {
    margin-bottom: 0 !important;
    border-radius: var(--v-r-s) var(--v-r-s-xc);
}
// 最前的
#write .md-alert :is(ul, ol):first-child {
    margin-block-start: 0 !important;
}
// 最后的
#write .md-alert :is(ul, ol):last-child {
    margin-block-end: 0 !important;
}
#write .md-alert>p:first-child {
    margin-top: 0 !important;
}
#write .md-alert-text {
    font-family: var(--v-f-fm-subtitle) !important;
    font-size: 1em !important;
    font-weight: var(--v-f-w-bd);
    margin-bottom: 0;
}
.md-alert-text-container,
#write .md-alert-text {
    display: inline-flex;
    align-items: center;
}
#write .md-alert-text,
#write .md-alert-text-container::after {
    text-transform: uppercase;
}
#write .md-alert-text svg {
    margin-right: .5em;
    top: unset;
}

// 注音
@{writeOnEditing} span[md-inline="em"]>em>sup:only-child {
    opacity: 1;
    font-style: normal;
}
@{writeOnEditing} span[md-inline="em"]:has(em>sup:only-child) {
    font: normal .875em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
    padding-left: .5em;
    padding-right: .5em;
    display: inline-block;
    position: relative;
    top: -.75em;
    margin-left: -2.1em;
    width: 3em;
    white-space: nowrap;
    text-align: center;
    opacity: .6;
}
rp,
rt {
    font: normal .75em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
    padding-left: .5em;
    padding-right: .5em;
    opacity: .6;
}
rt:hover {
    color: var(--a-hover-color);
    opacity: 1;
    transform-origin: center bottom;
    transform: scale(1.2);
}

// 上标、下标内的代码样式（因为代码使用 px ，无法像 em 单位自动根据父级 font-size 进行缩放）
:is(sub, sup) code {
    font-size: 10px;
}

// --------------------
// 进度条
@pgbarOnEditingPrefix: ~'@{writeOnEditing} span[md-inline="strong"]';
@highlightOnEditing: ~'span[md-inline="highlight"]';
@pgbarOnEditing: ~'@{pgbarOnEditingPrefix}:has(@{highlightOnEditing}:only-child)';
@pgbarExported: ~".v-pgbar label";
@pgbarHeight: 8px;

@{pgbarOnEditing} mark::before,
.v-pgbar label {
    content: "";
    display: inline-block;
    margin-right: 5px;
    width: 40px;
    height: @pgbarHeight;
    border-radius: (@pgbarHeight / 2);
    outline: 1px solid var(--d-fc-a);
    border: 1px solid var(--d-bc);
    background: linear-gradient(90deg, var(--ac-t1), var(--d-bc) 90%);
}
@{pgbarOnEditing} mark::after,
.v-pgbar::after {
    content: "%";
    opacity: .6;
    font-size: .8em;
}
@{pgbarOnEditing} mark,
.v-pgbar {
    font-family: var(--v-f-fm-num) !important;
    font-size: .875em !important;
    color: var(--ac-t1);
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

// --------------------
// 黑幕（刮刮卡）
@strongOnEditing: ~'span[md-inline="strong"]';
@plainOnEditing: ~'span[md-inline="plain"]';
@coatingOnEditingPrefix: ~'@{writeOnEditing} span[md-inline="em"]';
@coatingOnEditing: ~'@{coatingOnEditingPrefix}:has(> em > @{strongOnEditing}:only-child)';
@coatingOnEditing2: ~'@{coatingOnEditingPrefix}:has(> em > span:first-child+@{strongOnEditing}:last-child)';

@{coatingOnEditing},
@{coatingOnEditing2},
.v-coating {
    text-shadow: 0 1px var(--d-fc);
    color: var(--d-bc);
    border: 1px solid var(--ac-gy);
    font: normal var(--v-f-w-bd) 1em var(--v-f-fm-tag); // [style] [weight] [size/[line-height]] [family]
    display: inline-block;
    border-radius: @codeBorderRadius;
    padding: 2px 8px;
}
.v-coating {
    cursor: var(--cur-pointer-text);
}
.v-coating:active {
    cursor: text;
}
@{coatingOnEditing},
@{coatingOnEditing2} {
    padding: 2px 8px;
}
@{coatingOnEditing},
@{coatingOnEditing2} {
    background: linear-gradient(135deg,
        var(--ac-gy) 0%, var(--ac-gy) 25%,
        var(--d-fc) 25%, var(--d-fc) 50%,
        var(--ac-gy) 50%, var(--ac-gy) 75%,
        var(--d-fc) 75%, var(--d-fc) 100%);
}
@{coatingOnEditing},
@{coatingOnEditing2},
@{coatingOnEditing} > em,
@{coatingOnEditing2} > em {
    line-height: @miniLineHeight;
    font-style: normal;
}
@{coatingOnEditing} .md-meta,
@{coatingOnEditing2} .md-meta {
    color: var(--d-bc);
    opacity: .6;
}
.v-coating:hover {
    border-color: var(--a-color);
    transform: scale(1.1);
}
.v-coating.opened {
    border-color: var(--d-fc);
    background: var(--d-bc) !important;
    text-shadow: none;
    color: var(--d-fc);
}
// 刮刮卡隐藏的内容
@{coatingOnEditingPrefix} > em > @{strongOnEditing}:only-child > strong,
@{coatingOnEditingPrefix} > em > span:first-child + @{strongOnEditing}:last-child > strong {
    font-size: 1em;
    color: var(--d-fc);
    text-shadow: none;
    margin-left: 2px;
    border: none;
    background: var(--d-bc);
    display: none;
}
// 点击进行编辑时
@{coatingOnEditing}.md-expand,
@{coatingOnEditing2}.md-expand {
    padding: 0 8px;
    box-shadow: var(--v-input-focus-shadow) !important;
    border-color: var(--a-color) !important;
    background: linear-gradient(135deg,
        var(--ac-gy) 0%, var(--ac-gy) 11%,
        var(--d-fc) 11%, var(--d-fc) 20%,
        var(--ac-gy) 20%, var(--ac-gy) 31%,
        var(--d-fc) 31%, var(--d-fc) 40%,
        var(--ac-gy) 41%, var(--ac-gy) 52%,
        var(--d-fc) 52%, var(--d-fc) 61%,
        var(--ac-gy) 61%, var(--ac-gy) 72%,
        var(--d-fc) 72%, var(--d-fc) 81%,
        var(--ac-gy) 81%, var(--ac-gy) 92%,
        var(--d-fc) 92%, var(--d-fc) 100%);
}
@{coatingOnEditingPrefix}.md-expand > em @{strongOnEditing} > strong {
    display: inline-block !important;
    padding-left: 4px;
    padding-right: 4px;
}
// 无指定（无自定义）提示内容时
@{coatingOnEditingPrefix} > em > @{strongOnEditing}:only-child::before {
    content: "••••";
    font: normal var(--v-f-w-bd) 1em var(--v-f-fm-code); // [style] [weight] [size/[line-height]] [family]
    line-height: @miniLineHeight;
}

#write :is(sup, sub) {
    opacity: .6;
    font-size: .75em;
}

/**************************************
* 封面、封底
**************************************/

// 封面选择器
@coverAfterYAML: ~"#write>pre.md-meta-block:first-child+h6";
@coverWithoutYAML: ~"#write>h6:first-child";
// 封底选择器
@backcoverId: "h1:last-child";
@backcoverAfterYAML: ~"@{coverAfterYAML}~@{backcoverId}";
@backcover: ~"@{coverAfterYAML}~@{backcoverId}, @{coverWithoutYAML}~@{backcoverId}";

// 无标准封面时的封面样式
.v-doc-title.max {
    color: transparent;
    padding-top: 50px;
    opacity: .6;
}
// 文库时的封面位置样式
.v-doc-title.mini {
    color: var(--h-f);
    font: var(--v-f-w-title) 2.5em/1.25 var(--v-f-fm-title); // [style] [weight] [size/[line-height]] [family]
    padding-top: 10px;
    opacity: .6;
}

// 封面：#write 下 H6 作为第一个元素时
@{coverAfterYAML}, // 有 YAML 的情况
@{coverWithoutYAML}, // 无 YAML 的情况
// 封底：#write 下 H6 作为最后一个元素时
@{backcover} {
    display: block;
    color: @coverTextColor !important;
    font: var(--v-f-w-title) 2.5em/1.25 var(--v-f-fm-title); // [style] [weight] [size/[line-height]] [family]
    text-align: @coverTextAlign;
    height: 640px;
    padding: var(--thm-c-t-pd);
    margin: 0 0 3em;
    border: none;
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    box-shadow: @contrastBorderForCover;
    background-color: @coverBackgroundColor;
    background-image: @coverBackgroundImage;
    background-size: @coverBackgroundSize;
    background-repeat: @coverBackgroundRepeat;
    background-position: @coverBackgroundPosition;
    letter-spacing: 0;
    filter: var(--v-brightness-dark);
}
@{coverAfterYAML}>span, // 有 YAML 的情况
@{coverWithoutYAML}>span { // 无 YAML 的情况
    color: @coverTextColor !important;
    -webkit-text-stroke: @coverTextStroke;
    text-stroke: @coverTextStroke;
    text-shadow: @coverTextShadow;
}
@{backcover}>span {
    -webkit-text-stroke: @backcoverTextStroke;
    text-stroke: @backcoverTextStroke;
    text-shadow: @backcoverTextShadow;
    background: none;
    background-clip: inherit;
    -webkit-background-clip: inherit;
    color: @backcoverTextColor !important;
}

// 封底样式微调
@{backcover} {
    height: 480px; // 为封面高度的 75%，比例为 4:3
    margin-top: 3em;
    margin-bottom: 0;
    padding: var(--thm-bc-t-pd);
    color: @backcoverTextColor !important;
    text-align: @backcoverTextAlign !important;
    background-color: @backcoverBackgroundColor !important;
    background-image: @backcoverBackgroundImage !important;
    background-size: @backcoverBackgroundSize !important;
    background-repeat: @backcoverBackgroundRepeat !important;
    background-position: @backcoverBackgroundPosition !important;
    letter-spacing: 0;
}

// 封面内上标格式
@{coverAfterYAML} sup,
@{coverWithoutYAML} sup {
    opacity: 1;
    color: @coverTextColor !important;
    .genCoverSup();
}

// 封面内下标格式（大标题上的小标题）
@{coverAfterYAML} sub,
@{coverWithoutYAML} sub {
    opacity: 1;
    color: @coverSubColor;
    -webkit-text-stroke: @coverTextStroke;
    text-stroke: @coverTextStroke;
    text-shadow: @coverTextShadow;
}

// 封面内下划线格式（大标题下的副标题）
@{coverAfterYAML} u,
@{coverWithoutYAML} u {
    color: @coverUnderlineColor;
    text-decoration: none;
    text-shadow: @coverTextShadow;
    border: none;
    .genCoverU();
}

// 封面内密级信息（多级标签，编辑时）
@{coverAfterYAML} em:has(span:first-child+@{codeOnEditing}), // 多级标签带标题（第1段）
@{coverWithoutYAML} em:has(span:first-child+@{codeOnEditing}),
@{coverAfterYAML} em:has(@{codeOnEditing}:first-child+span:last-child), // 多级标签不带标题（第2段）
@{coverWithoutYAML} em:has(@{codeOnEditing}:first-child+span:last-child),
@{coverAfterYAML} .v-badge-name,
@{coverWithoutYAML} .v-badge-name {
    line-height: 1;
    color: @badgeColorInCover !important;
    background: @badgeBakgroundInCover !important;
    border-color: @badgeBorderColorInCover !important;
    border-width: @badgeBorderWidthInCover !important;
    text-shadow: none;
    // 输入光标颜色
    caret-color: @buttonForeHoverColor;
    -webkit-text-stroke: initial;
    text-stroke: initial;
    vertical-align: initial;
}

// 封面内的作者信息
@{coverAfterYAML} :is(strong, strong::before),
@{coverWithoutYAML} :is(strong, strong::before) {
    color: @coverAuthorColor;
    -webkit-text-stroke: initial;
    text-stroke: initial;
    text-shadow: none;
    font-weight: normal !important;
    font-size: .625em;
    .genCoverStrong();
}

// 作者信息前缀
@{coverAfterYAML} strong::before,
@{coverWithoutYAML} strong::before {
    margin-bottom: -.5em;
    .genCoverStrongBefore();
}
@{coverAfterYAML} strong::after,
@{coverWithoutYAML} strong::after {
    .genCoverStrongAfter();
}
// 内有 <br> 换行的处理
@{coverAfterYAML} strong > :is(.md-br, br),
@{coverWithoutYAML} strong > :is(.md-br, br) {
    display: none;
}
// 编辑时微调
@{coverAfterYAML} .md-expand strong > :is(.md-br, br),
@{coverWithoutYAML} .md-expand strong > :is(.md-br, br) {
    display: initial;
}
// 内有多行的处理
@{coverAfterYAML} strong > span,
@{coverWithoutYAML} strong > span {
    .genCoverStrongSpan();
}

// 封面内的版权信息（并排除注音、代码/单级标签/多级标签格式）
@{coverAfterYAML} em:not(:has(sup:only-child)):not(:has(code)),
@{coverWithoutYAML} em:not(:has(sup:only-child)):not(:has(code)) {
    color: @coverOwnerColor;
    -webkit-text-stroke: initial;
    text-stroke: initial;
    text-shadow: none;
    .genCoverEm();
}

// 封面、封底的前信息
@{coverAfterYAML}::before,
@{coverWithoutYAML}::before,
@{backcover}::before {
    content: "" !important;
}

@import "media";
